React Sankey - Array Only
To bind the Sankey to an array, pass this array to the dataSource property. The array should contain objects with the source
, target
, and weight
fields (default names). You can use the sourceField, targetField, and weightField properties to specify other names:
jQuery
index.js
const sankeyData = [ { from: "Brazil", to: "Spain", weight: 4 }, { from: "Brazil", to: "Portugal", weight: 5 }, { from: "Brazil", to: "England", weight: 2 }, { from: "Canada", to: "Portugal", weight: 2 }, { from: "Canada", to: "England", weight: 1 }, { from: "Mexico", to: "Portugal", weight: 9 }, { from: "Mexico", to: "Spain", weight: 5 } ]; $(function() { $("#sankeyContainer").dxSankey({ dataSource: sankeyData, sourceField: "from", targetField: "to" }); });
Angular
TypeScript
HTML
import { DxSankeyModule } from "devextreme-angular"; // ... export class AppComponent { sankeyData: Array<{ from: string, to: string, weight: number }> = [ { from: "Brazil", to: "Spain", weight: 4 }, { from: "Brazil", to: "Portugal", weight: 5 }, { from: "Brazil", to: "England", weight: 2 }, { from: "Canada", to: "Portugal", weight: 2 }, { from: "Canada", to: "England", weight: 1 }, { from: "Mexico", to: "Portugal", weight: 9 }, { from: "Mexico", to: "Spain", weight: 5 } ]; } @NgModule({ imports: [ // ... DxSankeyModule ], // ... })
<dx-sankey [dataSource]="sankeyData" sourceField="from" targetField="to"> </dx-sankey>
Vue
App.vue
<template> <DxSankey :data-source="sankeyData" source-field="from" target-field="to" /> </template> <script> import DxSankey from 'devextreme-vue/sankey'; export default { components: { DxSankey }, data() { return { sankeyData: [ { from: "Brazil", to: "Spain", weight: 4 }, { from: "Brazil", to: "Portugal", weight: 5 }, { from: "Brazil", to: "England", weight: 2 }, { from: "Canada", to: "Portugal", weight: 2 }, { from: "Canada", to: "England", weight: 1 }, { from: "Mexico", to: "Portugal", weight: 9 }, { from: "Mexico", to: "Spain", weight: 5 } ] } } } </script>
React
App.js
import Sankey from 'devextreme-react/sankey'; const sankeyData = [ { from: "Brazil", to: "Spain", weight: 4 }, { from: "Brazil", to: "Portugal", weight: 5 }, { from: "Brazil", to: "England", weight: 2 }, { from: "Canada", to: "Portugal", weight: 2 }, { from: "Canada", to: "England", weight: 1 }, { from: "Mexico", to: "Portugal", weight: 9 }, { from: "Mexico", to: "Spain", weight: 5 } ]; export default function App() { return ( <Sankey dataSource={sankeyData} sourceField="from" targetField="to" /> ); }
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.