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
<template> <dx-sankey id="sankey" :data-source="data" source-field="source" target-field="target" weight-field="weight" title="Commodity Turnover in 2017" > <dx-tooltip :enabled="true" :customize-link-tooltip="customizeLinkTooltip" /> <dx-node :width="8" :padding="30" /> <dx-link color-mode="gradient"/> </dx-sankey> </template> <script> import DxSankey, { DxTooltip, DxNode, DxLink } from 'devextreme-vue/sankey'; import { data } from './data.js'; export default { components: { DxSankey, DxTooltip, DxNode, DxLink }, data() { return { customizeLinkTooltip(info) { return { html: `<b>From:</b> ${info.source}<br/><b>To:</b> ${info.target}<br/><b>Weight:</b> ${info.weight}` }; } }; }, computed: { data() { return data; } } }; </script> <style> #sankey { height: 440px; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<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.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.light.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"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
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/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@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', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });