DevExtreme - New Sankey Diagram (v18.2)

DevExtreme Team Blog
22 February 2019

Please listen up, all you data analysts: DevExtreme now supports a Sankey diagram. This diagram displays relationships between nodes, which are technically called links. From the perspective of the data, this is often about flow, for instance of goods or services – but any type of relation between groups of subjects can be visualized by a Sankey diagram.

As usual, the new functionality is available on all platforms supported by DevExtreme, including Angular, Vue, React, jQuery and ASP.NET MVC and ASP.NET Core.

Sankey Diagram

The diagram above can be rendered using the following code. You can see how the weight values are automatically rendered as links of differing widths.

$(function() {
    dataSource: [
      { source: 'Brazil', target: 'Portugal', weight: 5 },
      { source: 'Brazil', target: 'France', weight: 1 },
      { source: 'Brazil', target: 'England', weight: 1 },
      { source: 'Canada', target: 'Portugal', weight: 1 },
      { source: 'Canada', target: 'France', weight: 5 },
      { source: 'Canada', target: 'England', weight: 1 }
    link: {
      colorMode: 'gradient'

A demo for the Sankey diagram is available, which you can modify and play with yourself. We also have Overview and API documentation available.

Thanks to everybody who already provided us with feedback during the development phase of this widget. We are still interested in your thoughts! Please feel free to leave a comment below, and it would be great if you could submit your responses to this short survey:

6 comment(s)
J Joubert
J Joubert


Please consider bringing this to the dashboard controls as well.


25 February, 2019
Baldur Fürchau
Baldur Fürchau

I agree with the above statement.

This will be the only way, where i can use these control, because our application has only the ASPxDashboard.

25 February, 2019
Andrey (DevExpress)
Andrey (DevExpress)

@J Joubert

@Baldur Fürchau

Thank you for your interest in this new control as a part of DevExpress Dashboard.

We will take it into account when planning our next release.

As you know, DevExpress Dashboard is a cross-platform product. Thus we would need to discuss this control implementation in our WinForms / WPF control suites as well. We recently discussed a similar situation in our WinForms Sunburst Control Blog Post

We would appreciate it if you describe a real-life scenario of Sankey Diagram in your dashboard.

26 February, 2019
Baldur Fürchau
Baldur Fürchau

Now we have V19.1.3, coming soon 19.1.5.

When did the sankey diagram arrive the ASPxDashboard?

21 June, 2019
BBK Beijing
BBK Beijing

Waitting for this control implementation in  WinForms / WPF control suites eagerly.

Now many customers want to analyze the flow of energy.

29 July, 2019
Alex (DevExpress Support)
Alex (DevExpress Support)

@BBK Beijing,

While we do not have this component in our current (v19.2) WinForms/WPF production schedule, we will take your inquiry into account when setting priorities for the next major updates.

12 August, 2019

Please login or register to post comments.