Syncfusion AI Assistant

How can I help you?

Getting started with Vue Sankey chart component in Vue 2

26 Mar 202620 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion^® Vue Sankey chart component.

Prerequisites

System requirements for Syncfusion^® Vue UI components

Dependencies

Below is the list of minimum dependencies required to use the Sankey Chart component.


|-- @syncfusion/ej2-vue-charts
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-charts
    |-- @syncfusion/ej2-vue-base
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-svg-base

Setting up the Vue 2 project

To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:

npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve

yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve

When creating a new project, choose the option Default ([Vue 2] babel, eslint) from the menu.

Terminal showing Vue CLI creating a Vue 2 project

Once the quickstart project is set up with default settings, proceed to add Syncfusion^® components to the project.

Add Syncfusion^® Vue packages

Syncfusion^® packages are available at npmjs.com. To use Vue components, install the required npm package.

This article uses the Vue Sankey Chart component as an example. Install the @syncfusion/ej2-vue-charts package by running:

npm install @syncfusion/ej2-vue-charts

yarn add @syncfusion/ej2-vue-charts

Note: npm v5+ saves packages to dependencies by default; --save is not required.

Add Syncfusion^® Vue component

Follow the steps below to add the Sankey Chart component:

First, import and register the Sankey Chart component in the script section of the src/App.vue file.

~/src/App.vue
<script>
import {
  SankeyComponent
} from '@syncfusion/ej2-vue-charts';

export default {
  components: {
    'ejs-sankey': SankeyComponent
  }
};
</script>

In the template section, define the Sankey Chart component.

~/src/App.vue
<template>
  <div id="app">
    <ejs-sankey id="container"></ejs-sankey>
  </div>
</template>

Here is the summarized code for the above steps in the src/App.vue file:

~/src/App.vue
<template>
  <div class="control-pane">
    <div class="control-section"  id="sankey-container">
      <ejs-sankey
        width="90%"
        height="420px"
        :title="title"
      >
        <e-sankey-nodes-collection>
          <e-sankey-node id="A" />
          <e-sankey-node id="B" />
          <e-sankey-node id="C" />
        </e-sankey-nodes-collection>

        <e-sankey-links-collection>
          <e-sankey-link sourceId="A" targetId="B" :value="100" />
          <e-sankey-link sourceId="B" targetId="C" :value="80" />
        </e-sankey-links-collection>

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

<script>
import {
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",

  data() {
    return {
      title: "Sankey Chart"
    };
  },

  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },

  provide: {
    sankey: [SankeyTooltip, SankeyLegend, SankeyExport]
  }
};
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>

Run the project

To run the project, use the following command:

npm run serve

yarn run serve

Module registration

The Sankey Chart component is organized into feature-specific modules. In Vue, enable a feature by registering its module(s) in the component’s provide option. The following features are demonstrated in the examples:

SankeyLegend — Module for legend support.
SankeyTooltip — Module for tooltip support.

The sample code below shows how to register the required modules in the component provide option:

import {
  SankeyComponent,
  SankeyLegend,
  SankeyTooltip
} from '@syncfusion/ej2-vue-charts';

export default {
  components: { 'ejs-sankey': SankeyComponent },
  provide: {
    sankey: [
      SankeyLegend,
      SankeyTooltip,
    ]
  }
};

Populate Sankey chart with data

This section explains how to plot below JSON data to the Sankey Chart.

export default {
  data () {
    return {
      sankeyLinks: [
        { source: 'A', target: 'B', weight: 5 },
        { source: 'A', target: 'C', weight: 3 },
        { source: 'B', target: 'D', weight: 2 },
        { source: 'C', target: 'D', weight: 4 }
      ],
    };
  }
};

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-pane">
    <div class="control-section"  id="sankey-container">
      <EjsSankey
        width="90%"
        height="420px"
        :title="title"
      >
        <ESankeyNodesCollection>
          <ESankeyNode id="Energy Input" :label="{ text: 'Energy Input' }" />
          <ESankeyNode id="Generation" :label="{ text: 'Generation' }" />
          <ESankeyNode id="Distribution" :label="{ text: 'Distribution' }" />
          <ESankeyNode id="Consumption" :label="{ text: 'Consumption' }" />
        </ESankeyNodesCollection>

        <ESankeyLinksCollection>
          <ESankeyLink sourceId="Energy Input" targetId="Generation" :value="500" />
          <ESankeyLink sourceId="Generation" targetId="Distribution" :value="450" />
          <ESankeyLink sourceId="Distribution" targetId="Consumption" :value="400" />
        </ESankeyLinksCollection>

      </EjsSankey>
    </div>
  </div>
</template>

<script setup>
import { ref, provide } from "vue";
import {
  SankeyComponent as EjsSankey,
  SankeyNodesCollectionDirective as ESankeyNodesCollection,
  SankeyNodeDirective as ESankeyNode,
  SankeyLinksCollectionDirective as ESankeyLinksCollection,
  SankeyLinkDirective as ESankeyLink,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";

const title = ref("Energy Flow Diagram");

provide("sankey", [SankeyTooltip, SankeyLegend, SankeyExport]);
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>
<template>
  <div class="control-pane">
    <div class="control-section"  id="sankey-container">
      <ejs-sankey
        width="90%"
        height="420px"
        :title="title"
      >
        <e-sankey-nodes-collection>
          <e-sankey-node id="Energy Input" :label="{ text: 'Energy Input' }" />
          <e-sankey-node id="Generation" :label="{ text: 'Generation' }" />
          <e-sankey-node id="Distribution" :label="{ text: 'Distribution' }" />
          <e-sankey-node id="Consumption" :label="{ text: 'Consumption' }" />
        </e-sankey-nodes-collection>

        <e-sankey-links-collection>
          <e-sankey-link sourceId="Energy Input" targetId="Generation" :value="500" />
          <e-sankey-link sourceId="Generation" targetId="Distribution" :value="450" />
          <e-sankey-link sourceId="Distribution" targetId="Consumption" :value="400" />
        </e-sankey-links-collection>

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

<script>
import {
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  data() {
    return {
      title: "Energy Flow Diagram"
    };
  },
  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },
  provide: {
    sankey: [SankeyTooltip, SankeyLegend, SankeyExport]
  }
};
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>

The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the [enable] property as true in [tooltip] object and by injecting SankeyTooltip into the provide.

~/src/App.vue
<template>
  <div class="control-pane">
    <div class="control-section"  id="sankey-container">
      <ejs-sankey
        width="90%"
        :height="chartHeight"
        :title="title"
        :subTitle="subTitle"
        :linkStyle="linkStyle"
        :labelSettings="labelSettings"
        :tooltip="tooltip"
        :legendSettings="legendSettings"
        :loaded="onLoaded"
      >
        <e-sankey-nodes-collection>
          <e-sankey-node id="Electricity Generation" :offset="-120" />
          <e-sankey-node id="Residential" :offset="38" />
          <e-sankey-node id="Commercial" :offset="36" />
          <e-sankey-node id="Industrial" :offset="34" />
          <e-sankey-node id="Transportation" :offset="32" />
          <e-sankey-node id="Rejected Energy" :offset="-40" />
          <e-sankey-node id="Energy Services" />
          <e-sankey-node id="Solar" />
          <e-sankey-node id="Nuclear" />
          <e-sankey-node id="Wind" />
          <e-sankey-node id="Geothermal" />
          <e-sankey-node id="Natural Gas" />
          <e-sankey-node id="Coal" />
          <e-sankey-node id="Biomass" />
          <e-sankey-node id="Petroleum" :offset="-10" />
        </e-sankey-nodes-collection>

        <e-sankey-links-collection>
          <e-sankey-link sourceId="Solar" targetId="Electricity Generation" :value="454" />
          <e-sankey-link sourceId="Nuclear" targetId="Electricity Generation" :value="185" />
          <e-sankey-link sourceId="Wind" targetId="Electricity Generation" :value="47.8" />
          <e-sankey-link sourceId="Geothermal" targetId="Electricity Generation" :value="40" />
          <e-sankey-link sourceId="Natural Gas" targetId="Electricity Generation" :value="800" />
          <e-sankey-link sourceId="Coal" targetId="Electricity Generation" :value="28.7" />
          <e-sankey-link sourceId="Biomass" targetId="Electricity Generation" :value="50" />

          <e-sankey-link sourceId="Electricity Generation" targetId="Residential" :value="182" />
          <e-sankey-link sourceId="Natural Gas" targetId="Residential" :value="400" />
          <e-sankey-link sourceId="Petroleum" targetId="Residential" :value="50" />

          <e-sankey-link sourceId="Electricity Generation" targetId="Commercial" :value="351" />
          <e-sankey-link sourceId="Natural Gas" targetId="Commercial" :value="300" />

          <e-sankey-link sourceId="Electricity Generation" targetId="Industrial" :value="641" />
          <e-sankey-link sourceId="Natural Gas" targetId="Industrial" :value="786" />
          <e-sankey-link sourceId="Biomass" targetId="Industrial" :value="563" />
          <e-sankey-link sourceId="Petroleum" targetId="Industrial" :value="300" />

          <e-sankey-link sourceId="Electricity Generation" targetId="Transportation" :value="20" />
          <e-sankey-link sourceId="Natural Gas" targetId="Transportation" :value="51" />
          <e-sankey-link sourceId="Biomass" targetId="Transportation" :value="71" />
          <e-sankey-link sourceId="Petroleum" targetId="Transportation" :value="2486" />

          <e-sankey-link sourceId="Residential" targetId="Rejected Energy" :value="432" />
          <e-sankey-link sourceId="Commercial" targetId="Rejected Energy" :value="351" />
          <e-sankey-link sourceId="Industrial" targetId="Rejected Energy" :value="972" />
          <e-sankey-link sourceId="Transportation" targetId="Rejected Energy" :value="1920" />

          <e-sankey-link sourceId="Residential" targetId="Energy Services" :value="200" />
          <e-sankey-link sourceId="Commercial" targetId="Energy Services" :value="300" />
          <e-sankey-link sourceId="Industrial" targetId="Energy Services" :value="755" />
          <e-sankey-link sourceId="Transportation" targetId="Energy Services" :value="637" />
        </e-sankey-links-collection>

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

<script>
import {
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";
import { Browser } from "@syncfusion/ej2-base";

export default {
  name: "App",

  data() {
    const isDevice = Browser.isDevice;
    return {
      title: "California Energy Consumption in 2023",
      subTitle: "Source: Lawrence Livermore National Laboratory",
      chartHeight: isDevice ? "600px" : "450px",
      linkStyle: { opacity: 0.6, curvature: 0.55, colorType: "Source" },
      labelSettings: { visible: isDevice ? false : true },
      tooltip: { enable: true },
      legendSettings: { visible: true, position: "Bottom", itemPadding: 8 }
    };
  },

  methods: {
    onLoaded() {
      const el = document.getElementById("sankey-container");
      if (el) el.setAttribute("title", "");
    }
  },

  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },

  provide: {
    sankey: [SankeyTooltip, SankeyLegend, SankeyExport]
  }
};
</script>
#sankey-container {
  height: 450px;
}

Verify the chart

After starting the dev server, confirm the Sankey Chart renders correctly:

Start the dev server with npm run serve or yarn run serve.
Open the project URL shown in the terminal (typically http://localhost:8080) and verify the chart displays.
If the chart does not render, inspect the browser console for errors related to missing modules, incorrect imports, or undefined data values.

Troubleshooting (common issues)

Chart not rendering: ensure the Sankey modules and directives are registered in provide and that sankeyLinks contains valid data.
Version mismatch: confirm @syncfusion/ej2-vue-charts is compatible with Vue 2 used in the project.

Run the project

To run the project, use the following command:

npm run serve

yarn run serve

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

How can I help you?

Getting started with Vue Sankey chart component in Vue 2

Prerequisites

Dependencies

Setting up the Vue 2 project

Add Syncfusion^® Vue packages

Add Syncfusion^® Vue component

Run the project

Module registration

Populate Sankey chart with data

Enable tooltip

Verify the chart

Troubleshooting (common issues)

Run the project

How can I help you?

Getting started with Vue Sankey chart component in Vue 2

Prerequisites

Dependencies

Setting up the Vue 2 project

Add Syncfusion® Vue packages

Add Syncfusion® Vue component

Run the project

Module registration

Populate Sankey chart with data

Enable tooltip

Verify the chart

Troubleshooting (common issues)

Run the project

Add Syncfusion^® Vue packages

Add Syncfusion^® Vue component