Getting started with EJ2 TypeScript Sankey control

23 Mar 202613 minutes to read

This document explains how to create a Sankey diagram and configure its features in TypeScript using the Essential JS 2 webpack quickstart seed repository. The page contains focused samples: initialize, add data, and tooltip/module injection.

This application is integrated with webpack.config.js and uses the latest webpack-cli. It requires Node.js v14.15.0 or higher.

Dependencies

Below is the list of minimum dependencies required to use the Sankey (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.

Set up development environment

Clone the Syncfusion quickstart repository and install dependencies.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart
cd ej2-quickstart
npm install

Sample 1 — Initialize Sankey

Add a container in ~/src/index.html and initialize the Sankey in src/app/app.ts.

import { Sankey, SankeyNodeModel, SankeyLinkModel, SankeyTooltip, SankeyLegend, SankeyExport } from '@syncfusion/ej2-charts';

Sankey.Inject(SankeyTooltip, SankeyLegend, SankeyExport);

const nodes: SankeyNodeModel[] = [
  { id: 'A' },
  { id: 'B' },
  { id: 'C' }
];

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

const sankey: Sankey = new 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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='sankey-container'></div>
    </div>
</body>

</html>

Now use the npm run start command to run the application in the browser.

npm run start

Sample — Add data to Sankey

Provide nodes and links to the Sankey component via the data configuration. See the example files included in the quickstart.

import { Sankey, SankeyNodeModel, SankeyLinkModel, SankeyTooltip, SankeyLegend, SankeyExport } from '@syncfusion/ej2-charts';

Sankey.Inject(SankeyTooltip, SankeyLegend, SankeyExport);

const nodes: SankeyNodeModel[] = [
  { id: 'Energy Input', label: { text: 'Energy Input' } },
  { id: 'Generation', label: { text: 'Generation' } },
  { id: 'Distribution', label: { text: 'Distribution' } },
  { id: 'Consumption', label: { text: 'Consumption' } }
];

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

const sankey: Sankey = new 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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='sankey-container'></div>
    </div>
</body>

</html>

Sample 3 — Tooltip and module injection

Inject Sankey modules to enable the tooltip and legend features when using modular imports. When using global scripts (CDN), modules are often available without explicit injection.

import { Sankey, SankeyNodeModel, SankeyLinkModel, SankeyTooltip, SankeyLegend, SankeyExport } from '@syncfusion/ej2-charts';
import { Browser } from '@syncfusion/ej2-base';

Sankey.Inject(SankeyTooltip, SankeyLegend, SankeyExport);

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

const nodes: SankeyNodeModel[] = [
  { 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: SankeyLinkModel[] = [
  { 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: Sankey = new Sankey(
  {
     width:  '90%',
    height: 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: 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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='sankey-container'></div>
    </div>
</body>

</html>

You can refer to our JavaScript Sankey feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Sankey example that shows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.