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:

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
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)

@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
Ralf Boscher
Ralf Boscher
We are also waiting for this Control in the winforms Suite - we have serval customers where we need this control for the energy management. do have a timeline for implementing the sankey-control?
7 November 2019
Alex (DevExpress Support)
Alex (DevExpress)


Thank you for the update. We cannot provide you with an estimate right now because our roadmap for the next year is not yet finalized. 

7 November 2019
Aleksandr Kvetnoy
Is it possible to use this Sankey chart in XAF WebForms application?
23 January 2020
Dennis (DevExpress)
Dennis Garavsky (DevExpress)

@Customer90991: Yes, it is possible. For more information, please refer to the following help topics:

27 January 2020

Please login or register to post comments.