If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React from 'react';
import Sankey, {
Tooltip, Link, Node, ITooltipProps,
} from 'devextreme-react/sankey';
import { data } from './data.ts';
const customizeLinkTooltip: ITooltipProps['customizeLinkTooltip'] = (info) => ({
html: `<b>From:</b> ${info.source}<br/><b>To:</b> ${info.target}<br/><b>Weight:</b> ${info.weight}`,
});
function App() {
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>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import Sankey, { Tooltip, Link, Node } from 'devextreme-react/sankey';
import { data } from './data.js';
const customizeLinkTooltip = (info) => ({
html: `<b>From:</b> ${info.source}<br/><b>To:</b> ${info.target}<br/><b>Weight:</b> ${info.weight}`,
});
function App() {
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>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
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 },
];
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
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 },
];
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
#sankey {
height: 440px;
}
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:
xxxxxxxxxx
{ 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.