Your search did not match any results.
Sankey Chart

Sankey Chart

Documentation

The DevExtreme HTML5 JavaScript Sankey Chart is used to visualize the flow magnitude between value sets. The values are connected. A wider connection denotes a higher flow magnitude.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import Sankey, { Tooltip, Link, Node } from 'devextreme-react/sankey'; import { data } from './data.js'; class App extends React.Component { render() { return ( <Sankey id={'sankey'} dataSource={data} sourceField={'source'} targetField={'target'} weightField={'weight'} title={'Commodity Turnover in 2017'} > <Tooltip enabled={true} customizeLinkTooltip={customizeLinkTooltip} > </Tooltip> <Link colorMode={'gradient'}> </Link> <Node width={8} padding={30}> </Node> </Sankey> ); } } function customizeLinkTooltip(info) { return { html: `<b>From:</b> ${info.source}<br/><b>To:</b> ${info.target}<br/><b>Weight:</b> ${info.weight}` }; } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.light.css" /> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#sankey { height: 440px; }
export 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 } ];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-react': 'npm:devextreme-react@19.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });