ES5 getting started with JavaScript Sankey control

18 Nov 201814 minutes to read

This guide explains how to create a Sankey diagram using plain JavaScript (ES5). The page includes focused samples: initialize, add data, and tooltip/module injection.

Dependencies

Below is the list of minimum dependencies required to use the Sankey diagram (part of the charts package).

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

Note: @syncfusion/ej2-pdf-export, @syncfusion/ej2-file-utils, and @syncfusion/ej2-compression are optional—required only for PDF export features.

Setup for local environment

Create a simple folder for the app and add index.html and index.js. You can use either local script files (copied from the EJ2 build) or CDN links.

Using local scripts

Copy required global scripts and styles into a resources folder and reference them from index.html.

<!DOCTYPE html>
<html>
  <head>
    <title>Essential JS 2 Sankey</title>
    <!-- Essential JS 2 dependencies -->
    <script src="resources/scripts/ej2-base.min.js"></script>
    <script src="resources/scripts/ej2-data.min.js"></script>
    <script src="resources/scripts/ej2-svg-base.min.js"></script>
    <!-- Sankey is part of ej2-charts -->
    <script src="resources/scripts/ej2-charts.min.js"></script>
  </head>
  <body>
    <div id="element"></div>
    <script src="index.js"></script>
  </body>
</html>

Using CDN links

<script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js"></script>

Sample 1 — Initialize Sankey

Add a div element for the Sankey in index.html and initialize it from index.js.

index.js
index.html
const nodes = [
  { id: 'A' },
  { id: 'B' },
  { id: 'C' }
];

const links = [
  { sourceId: 'A', targetId: 'B', value: 100 },
  { sourceId: 'B', targetId: 'C', value: 80 }
];

const sankey = new ej.charts.Sankey(
  {
     width:  '90%',
    height: '420px',
    title: 'Sankey Chart',
    nodes: nodes,
    links: links,
    tooltip: { enable: true },
    legendSettings: { visible: true }
  },
  '#sankey-container'
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="sankey-container"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Sample 2 — Add data to Sankey

Provide nodes and links to the Sankey component via the data configuration. See the example:

index.js
index.html
const nodes = [
  { id: 'Energy Input', label: { text: 'Energy Input' } },
  { id: 'Generation', label: { text: 'Generation' } },
  { id: 'Distribution', label: { text: 'Distribution' } },
  { id: 'Consumption', label: { text: 'Consumption' } }
];

const links = [
  { sourceId: 'Energy Input', targetId: 'Generation', value: 500 },
  { sourceId: 'Generation', targetId: 'Distribution', value: 450 },
  { sourceId: 'Distribution', targetId: 'Consumption', value: 400 }
];

const sankey = new ej.charts.Sankey(
  {
     width:  '90%',
    height: '420px',
    title: 'Energy Flow Diagram',
    nodes: nodes,
    links: links,
    tooltip: { enable: true },
    legendSettings: { visible: true }
  },
  '#sankey-container'
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="sankey-container"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Enable tooltip and legend by injecting required modules when using modular imports. For global script usage (CDN or combined bundle), modules are often available without explicit injection.

index.js
index.html
const onLoaded = () => {
  const element = document.getElementById('sankey-container');
  if (element) element.setAttribute('title', '');
};

const nodes = [
  { id: 'Electricity Generation', offset: -120 },
  { id: 'Residential', offset: 38 },
  { id: 'Commercial', offset: 36 },
  { id: 'Industrial', offset: 34 },
  { id: 'Transportation', offset: 32 },
  { id: 'Rejected Energy', offset: -40 },
  { id: 'Energy Services' },
  { id: 'Solar' },
  { id: 'Nuclear' },
  { id: 'Wind' },
  { id: 'Geothermal' },
  { id: 'Natural Gas' },
  { id: 'Coal' },
  { id: 'Biomass' },
  { id: 'Petroleum', offset: -10 }
];

const links = [
  { sourceId: 'Solar', targetId: 'Electricity Generation', value: 454 },
  { sourceId: 'Nuclear', targetId: 'Electricity Generation', value: 185 },
  { sourceId: 'Wind', targetId: 'Electricity Generation', value: 47.8 },
  { sourceId: 'Geothermal', targetId: 'Electricity Generation', value: 40 },
  { sourceId: 'Natural Gas', targetId: 'Electricity Generation', value: 800 },
  { sourceId: 'Coal', targetId: 'Electricity Generation', value: 28.7 },
  { sourceId: 'Biomass', targetId: 'Electricity Generation', value: 50 },
  { sourceId: 'Electricity Generation', targetId: 'Residential', value: 182 },
  { sourceId: 'Natural Gas', targetId: 'Residential', value: 400 },
  { sourceId: 'Petroleum', targetId: 'Residential', value: 50 },
  { sourceId: 'Electricity Generation', targetId: 'Commercial', value: 351 },
  { sourceId: 'Natural Gas', targetId: 'Commercial', value: 300 },
  { sourceId: 'Electricity Generation', targetId: 'Industrial', value: 641 },
  { sourceId: 'Natural Gas', targetId: 'Industrial', value: 786 },
  { sourceId: 'Biomass', targetId: 'Industrial', value: 563 },
  { sourceId: 'Petroleum', targetId: 'Industrial', value: 300 },
  { sourceId: 'Electricity Generation', targetId: 'Transportation', value: 20 },
  { sourceId: 'Natural Gas', targetId: 'Transportation', value: 51 },
  { sourceId: 'Biomass', targetId: 'Transportation', value: 71 },
  { sourceId: 'Petroleum', targetId: 'Transportation', value: 2486 },
  { sourceId: 'Residential', targetId: 'Rejected Energy', value: 432 },
  { sourceId: 'Commercial', targetId: 'Rejected Energy', value: 351 },
  { sourceId: 'Industrial', targetId: 'Rejected Energy', value: 972 },
  { sourceId: 'Transportation', targetId: 'Rejected Energy', value: 1920 },
  { sourceId: 'Residential', targetId: 'Energy Services', value: 200 },
  { sourceId: 'Commercial', targetId: 'Energy Services', value: 300 },
  { sourceId: 'Industrial', targetId: 'Energy Services', value: 755 },
  { sourceId: 'Transportation', targetId: 'Energy Services', value: 637 }
];

const sankey = new ej.charts.Sankey(
  {
     width:  '90%',
    height: ej.base.Browser.isDevice ? '600px' : '450px',
    title: 'California Energy Consumption in 2023',
    subTitle: 'Source: Lawrence Livermore National Laboratory',
    linkStyle: { opacity: 0.6, curvature: 0.55, colorType: 'Source' },
    labelSettings: { visible: ej.base.Browser.isDevice ? false : true },
    tooltip: { enable: true },
    legendSettings: { visible: true, position: 'Bottom', itemPadding: 8 },
    loaded: onLoaded,
    nodes: nodes,
    links: links
  },
  '#sankey-container'
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="sankey-container"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Search docs

Ask Syncfusion AI Assistant