Vue 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"
        />
    );
}

View Demo

See Also