DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Charts - Overview

The Sankey chart visualizes the flow magnitude between value sets. Flow values are nodes, and the connections between nodes are links. The higher the flow magnitude, the wider the link is.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

Bind Sankey to Data

Each object of your data source should be a link between source and target nodes. For example, the following link connects the Spain and USA nodes and has a weight of 2:

To bind Sankey to data fields, use the sourceField, targetField, and weightField properties.

Customize Node and Link Appearance

Use the node and link objects to configure Sankey appearance. This demo specifies the width and padding properties for nodes and the colorMode property for links.

Configure the Tooltip

The tooltip content differs for nodes and links. When you hover over a node, the tooltip shows the node's title, and its incoming and outgoing weights. When you hover over a link, the tooltip shows the link's direction and weight.

To customize the tooltip content, use the customizeNodeTooltip and customizeLinkTooltip functions. In this demo, you can see an example of the customizeLinkTooltip function.