Getting Started with Angular Sankey Chart Component

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

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

Before getting started, ensure that your environment meets the system requirements for Syncfusion® Angular UI components, which covers supported Node.js, Angular, and @syncfusion/ej2-angular-charts versions.

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

Verify the installation:

ng version

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. 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]
  • By default, a CSS-based application is created. Use SCSS if required:
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.

AI

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 npmjs.com. To use the Angular Sankey Chart component, add the Angular Chart package using the Angular CLI:

ng add @syncfusion/ej2-angular-charts

The above command will perform the following configurations:

  • Add the @syncfusion/ej2-angular-charts package and 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.

Ivy library distribution package

Syncfusion®’s latest Angular packages are provided as Ivy-compatible and suited for Angular 12 and above. To install the package, execute:

ng add @syncfusion/ej2-angular-charts

Angular compatibility compiled package (ngcc)

For applications not compiled with Ivy, use the ngcc tagged packages:

npm install @syncfusion/[email protected]

Note: The ngcc packages are still compatible with Angular CLI versions 15 and below. However, they may generate warnings suggesting the use of Ivy compiled packages. Starting from Angular 16, support for the ngcc package has been completely removed. If you have further questions regarding ngcc compatibility, please refer to the following FAQ.

Add the Sankey Chart Component

Update src/app/app.component.ts (or src/app/app.ts in Angular 20+) to render the Sankey Chart component:

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));

Note: SankeyAllModule registers every available service at once, which is convenient for getting started. For production, prefer the granular SankeyModule (shown later in this guide) and inject only the services you need.

Use the ng serve command to run the application in the browser:

ng serve

Module Injection

Sankey features are segregated into individual feature-wise services. To use a particular feature, you need to inject its corresponding service in app.component.ts.

There are two ways to register Sankey services:

  • SankeyAllModule — Registers every available service at once. Use this for quick setup or when you need most features.
  • SankeyModule — Registers only the services you explicitly add to the providers array. This granular form is recommended for production applications to keep bundle size small.

For this application, the tooltip and legend features of the Sankey Chart are used. The relevant feature service names and descriptions are:

Service Description
SankeyTooltipService Required to render the tooltip.
SankeyLegendService Required to render the legend.

Update src/app/app.component.ts to import the granular SankeyModule and the required services, and add them to the providers array of the component:

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

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

The following example uses SankeyModule with the granular providers registered above and renders the empty chart with the tooltip and legend services ready to be used.

// 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));

Bind Data to the Sankey Chart

Now that the granular services are registered, you can populate the Sankey Chart with data. Nodes represent the categories, and links represent the flow between them. Each node has a unique id, and each link connects a source node to a target node with a numeric value. The following example shows a simple energy-flow Sankey:

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));

The Sankey diagram renders nodes (rectangles) sized proportionally to their flow, with links (curved bands) connecting source nodes to target nodes. Hovering over a link displays a tooltip with the source, target, and value.

Troubleshooting

If the Sankey Chart does not render as expected, check for these common issues:

  • Chart not visible: Verify that ViewEncapsulation.None is set on the component, that the id on <ejs-sankey> is unique, and that the selector matches the root element in index.html (commonly <app-root>).
  • Data not displayed: Check that your data contains source, target, and value properties and that node ids match exactly between links.
  • Build errors: Run ng version to confirm that Node.js, Angular CLI, and @syncfusion/ej2-angular-charts are on supported versions.

See also