• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting


You can customize the KendoReact Sankey diagram in three ways:

Customizing the Sankey chart Elements

You can configure the labels, nodes, and links displayed on the Sankey Diagram by using the following properties:

  • links—provides options to set the colorType of the link to either static, source, or target. It also allows you to control the opacity and highlighting of the link.
  • nodes—provides options to modify the color, opacity, offset, padding, and width of the node.
  • labels—provides options to modify the font, color, opacity, alignment, padding, margin, border, and offset of the label. It also allows you to set the visible property to show or hide the label.

The following demo shows how to set the links, nodes, and labels options.

View Source
Change Theme:

Customizing Element Instances

As the properties set to data take precedence, using the data property allows you to target select element instances and apply a specific configuration only to these instances.

The demo below shows how to configure and use the data prop to:

  • Change the color of the first link.
  • Change the offset of the node with the label text mobile.
View Source
Change Theme:

Applying Component-Wide Styles

Another way to customize the Sankey Diagram is to configure the CSS styles of the entire component by using its style property. This approach allows you to control styles like width, height, and backgroundColor.

        style={{ width: 900, height: 600, backgroundColor: 'transparent' }}