HelpBot Assistant

How can I help you?

Getting started with Angular Sankey Chart component

14 Mar 202615 minutes to read

This section explains the steps required to create a simple Angular Sankey Chart and demonstrates the basic usage of the Sankey Chart component in an Angular environment.

Note: This guide supports Angular 21 and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the Angular version support matrix. Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.

Ready to streamline your Syncfusion^® Angular development? Discover the full potential of Syncfusion^® Angular components with Syncfusion^® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion^® CodeStudio and more. Explore Syncfusion^® AI Coding Assistant

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion^® Angular UI Components.

Setup Angular environment

A straightforward approach to begin with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Angular 21 Standalone Architecture:
Standalone components are the default in Angular 21.
If you need more information about the standalone architecture, refer to the Standalone Guide.

Installing a specific version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create an Angular application

With Angular CLI installed, execute the following command to generate a new application:

ng new syncfusion-angular-app

This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format:

? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org ]

To directly create a project with SCSS:

ng new syncfusion-angular-app --style=scss

During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

SSR

Select the required AI tool or ‘none’ if you do not need any AI tool.

Navigate to your newly created application directory:

cd syncfusion-angular-app

Note:
In Angular 19 and below, the CLI generates files like app.component.ts, app.component.html, etc.
In Angular 20+, the CLI generates a simpler structure with app.ts, app.html, and app.css (no .component. suffixes).

Installing Syncfusion® Sankey Chart package

Syncfusion’s Angular component packages are available on https://www.npmjs.com/search?q=ej2-angular.

Install using Angular CLI:

ng add @syncfusion/ej2-angular-charts

This command will:

Add the @syncfusion/ej2-angular-charts package and its peer dependencies to your package.json.
Import the required chart modules into your application automatically.

For more details on version compatibility, refer to the Version Compatibility section.

Syncfusion® offers two package structures:

Ivy library distribution package – Recommended for Angular 12+
Angular compatibility compiler (ngcc) – For Angular 15 and below

Ivy library distribution package

ng add @syncfusion/ej2-angular-charts

Angular compatibility compiled package (ngcc)

npm add @syncfusion/[email protected]

ngcc packages work only on Angular 15 and below.
They are not supported starting from Angular 16.
If you have further questions regarding ngcc compatibility, please refer to the following FAQ.

Add Sankey Chart component

Modify app.component.ts:

import { Component, ViewEncapsulation } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [SankeyAllModule],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-sankey id="sankey-container"></ejs-sankey>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent { }

Update index.html:

<app-container></app-container>

Run the app:

ng serve

Basic Sankey example

app.component.ts
main.ts
import { Component } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';
import {
  SankeyTooltipService,
  SankeyLegendService,
  SankeyExportService
} from '@syncfusion/ej2-angular-charts';

@Component({
  imports: [SankeyAllModule],
  providers: [
    SankeyTooltipService,
    SankeyLegendService,
    SankeyExportService
  ],
  standalone: true,
  selector: 'app-container',
  template: `
    <div class="control-pane">
      <div class="control-section" id="sankey-container">

        <ejs-sankey
          width="90%"
          height="420px"
          title="Sankey Chart">

          <e-sankey-nodes>
            <e-sankey-node id="A"></e-sankey-node>
            <e-sankey-node id="B"></e-sankey-node>
            <e-sankey-node id="C"></e-sankey-node>
          </e-sankey-nodes>

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

        </ejs-sankey>

      </div>
    </div>
  `
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Add data to Sankey Chart

Nodes represent the categories, and links represent the flow between them.

app.component.ts
main.ts
import { Component } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';
import {
  SankeyTooltipService,
  SankeyLegendService,
  SankeyExportService
} from '@syncfusion/ej2-angular-charts';

@Component({
  imports: [SankeyAllModule],
  providers: [
    SankeyTooltipService,
    SankeyLegendService,
    SankeyExportService
  ],
  standalone: true,
  selector: 'app-container',
  template: `
    <div class="control-pane">
      <div class="control-section" id="sankey-container">

        <ejs-sankey
          width="90%"
          height="420px"
          title="Energy Flow Diagram">

          <e-sankey-nodes>
            <e-sankey-node id="Energy Input" [label]="{ text: 'Energy Input' }"></e-sankey-node>
            <e-sankey-node id="Generation" [label]="{ text: 'Generation' }"></e-sankey-node>
            <e-sankey-node id="Distribution" [label]="{ text: 'Distribution' }"></e-sankey-node>
            <e-sankey-node id="Consumption" [label]="{ text: 'Consumption' }"></e-sankey-node>
          </e-sankey-nodes>

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

        </ejs-sankey>

      </div>
    </div>
  `
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Module injection

To enable tooltip and legend features, inject the following services:

SankeyTooltipService
SankeyLegendService

import { Component } from '@angular/core';
import {
  SankeyModule,
  SankeyTooltipService,
  SankeyLegendService
} from '@syncfusion/ej2-angular-charts';

@Component({
  imports: [SankeyModule],
  standalone: true,
  providers: [SankeyTooltipService, SankeyLegendService]
})
export class AppComponent {}

app.component.ts
main.ts
// app.component.ts
import { Component } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';
import {
  SankeyTooltipService,
  SankeyLegendService,
  SankeyExportService
} from '@syncfusion/ej2-angular-charts';
import { Browser } from '@syncfusion/ej2-base';

@Component({
  standalone: true,
  selector: 'app-container',
  imports: [SankeyAllModule],
  providers: [SankeyTooltipService, SankeyLegendService, SankeyExportService],
  template: `
    <div class="control-pane">
      <div class="control-section" id="sankey-container">
        <ejs-sankey
          [width]="'90%'"
          [height]="chartHeight"
          [title]="'California Energy Consumption in 2023'"
          [subTitle]="'Source: Lawrence Livermore National Laboratory'"
          [linkStyle]="linkStyle"
          [labelSettings]="labelSettings"
          [tooltip]="tooltip"
          [legendSettings]="legendSettings"
          (loaded)="onLoaded()"
        >
          <!-- Nodes -->
          <e-sankey-nodes>
            <e-sankey-node id="Electricity Generation" [offset]="-120"></e-sankey-node>
            <e-sankey-node id="Residential" [offset]="38"></e-sankey-node>
            <e-sankey-node id="Commercial" [offset]="36"></e-sankey-node>
            <e-sankey-node id="Industrial" [offset]="34"></e-sankey-node>
            <e-sankey-node id="Transportation" [offset]="32"></e-sankey-node>
            <e-sankey-node id="Rejected Energy" [offset]="-40"></e-sankey-node>
            <e-sankey-node id="Energy Services"></e-sankey-node>
            <e-sankey-node id="Solar"></e-sankey-node>
            <e-sankey-node id="Nuclear"></e-sankey-node>
            <e-sankey-node id="Wind"></e-sankey-node>
            <e-sankey-node id="Geothermal"></e-sankey-node>
            <e-sankey-node id="Natural Gas"></e-sankey-node>
            <e-sankey-node id="Coal"></e-sankey-node>
            <e-sankey-node id="Biomass"></e-sankey-node>
            <e-sankey-node id="Petroleum" [offset]="-10"></e-sankey-node>
          </e-sankey-nodes>

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

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

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

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

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

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

            <e-sankey-link sourceId="Residential" targetId="Energy Services" [value]="200"></e-sankey-link>
            <e-sankey-link sourceId="Commercial" targetId="Energy Services" [value]="300"></e-sankey-link>
            <e-sankey-link sourceId="Industrial" targetId="Energy Services" [value]="755"></e-sankey-link>
            <e-sankey-link sourceId="Transportation" targetId="Energy Services" [value]="637"></e-sankey-link>
          </e-sankey-links>
        </ejs-sankey>
      </div>
    </div>
  `
})
export class AppComponent {

  public chartHeight: string = Browser.isDevice ? '600px' : '450px';

  public linkStyle = {
    opacity: 0.6,
    curvature: 0.55,
    colorType: 'Source'
  };

  public labelSettings = {
    visible: !Browser.isDevice
  };

  public tooltip = {
    enable: true
  };

  public legendSettings = {
    visible: true,
    position: 'Bottom',
    itemPadding: 8
  };

  public onLoaded(): void {
    const element = document.getElementById('sankey-container');
    if (element) {
      element.setAttribute('title', '');
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can refer to our Angular Sankey Chart feature tour page for its groundbreaking feature representations. You can also explore our Angular Sankey Chart example that shows various flow visualization scenarios and how to represent complex data movements.

Search docs

Ask HelpBot