Vue Sankey Diagram – Elegant and Interactive Visualization

<template>
  <div id="app">
    <ejs-sankey
      id="sankey"
      title="Device Usage"
      :nodeStyle="nodeStyle"
      :linkStyle="linkStyle"
      :legendSettings="legendSettings">

      <e-sankey-nodes>
          <e-sankey-node id="Female" :label="{ text: 'Female (58%)' }" />
          <e-sankey-node id="Male" :label="{ text: 'Male (42%)' }" />
          <e-sankey-node id="Tablet" :label="{ text: 'Tablet (12%)' }" />
          <e-sankey-node id="Mobile" :label="{ text: 'Mobile (40%)' }" />
          <e-sankey-node id="Desktop" :label="{ text: 'Desktop (48%)' }" />
          <e-sankey-node id="< 18" :label="{ text: '< 18 years (8%)' }" />
          <e-sankey-node id="18-26" :label="{ text: '18-26 years (35%)' }" />
          <e-sankey-node id="27-40" :label="{ text: '27-40 years (38%)' }" />
          <e-sankey-node id="> 40" :label="{ text: '> 40 years (19%)' }" />
      </e-sankey-nodes>

      <e-sankey-links>
          <e-sankey-link source-id="Female" target-id="Tablet" :value="12" />
          <e-sankey-link source-id="Female" target-id="Mobile" :value="14" />
          <e-sankey-link source-id="Female" target-id="Desktop" :value="32" />
          <e-sankey-link source-id="Male" target-id="Mobile" :value="26" />
          <e-sankey-link source-id="Male" target-id="Desktop" :value="16" />
          <e-sankey-link source-id="Tablet" target-id="< 18" :value="4" />
          <e-sankey-link source-id="Tablet" target-id="> 40" :value="8" />
          <e-sankey-link source-id="Mobile" target-id="< 18" :value="4" />
          <e-sankey-link source-id="Mobile" target-id="18-26" :value="24" />
          <e-sankey-link source-id="Mobile" target-id="27-40" :value="10" />
          <e-sankey-link source-id="Mobile" target-id="> 40" :value="2" />
          <e-sankey-link source-id="Desktop" target-id="18-26" :value="11" />
          <e-sankey-link source-id="Desktop" target-id="27-40" :value="28" />
          <e-sankey-link source-id="Desktop" target-id="> 40" :value="9" />
      </e-sankey-links>

    </ejs-sankey>
  </div>
</template>

<script>

import Vue from 'vue';
import {
  SankeyPlugin,
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyLegend
} from '@syncfusion/ej2-vue-charts';

Vue.use(SankeyPlugin);

export default {
  components: {
    'ejs-sankey': SankeyComponent,
    'e-sankey-nodes': SankeyNodesCollectionDirective,
    'e-sankey-node': SankeyNodeDirective,
    'e-sankey-links': SankeyLinksCollectionDirective,
    'e-sankey-link': SankeyLinkDirective
  },
  provide: {
    sankey: [SankeyLegend]
  },
  data() {
    return {
      nodeStyle: { width: 30, padding: 10 },
      linkStyle: { colorType: 'Source' },
      legendSettings: { visible: true, position: 'Bottom' }
    };
  }
};
</script>