Free Trial Buy
    Your search did not match any results.
    Sankey Chart

    Sankey Chart

    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.

    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:

    { source: 'Spain', target: 'USA', weight: 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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { $scope.sankeyOptions = { dataSource: data, sourceField: 'source', targetField: 'target', weightField: 'weight', title: 'Commodity Turnover in 2017', node: { width: 8, padding: 30, }, link: { colorMode: 'gradient', }, tooltip: { enabled: true, customizeLinkTooltip(info) { return { html: `<b>From:</b> ${ info.source }<br/><b>To:</b> ${ info.target }<br/>` + `<b>Weight:</b> ${ info.weight}`, }; }, }, }; });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.6/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/22.2.6/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div id="sankey" dx-sankey="sankeyOptions"></div> </div> </body> </html>
    #sankey { height: 440px; }
    const data = [ { source: 'Spain', target: 'United States of America', weight: 2 }, { source: 'Germany', target: 'United States of America', weight: 8 }, { source: 'France', target: 'United States of America', weight: 4 }, { source: 'Germany', target: 'Great Britain', weight: 2 }, { source: 'France', target: 'Great Britain', weight: 4 }, { source: 'United States of America', target: 'Australia', weight: 6 }, { source: 'United States of America', target: 'New Zealand', weight: 5 }, { source: 'United States of America', target: 'Japan', weight: 3 }, { source: 'Great Britain', target: 'New Zealand', weight: 4 }, { source: 'Great Britain', target: 'Japan', weight: 1 }, ];