Getting started with React Sankey Chart component

24 Jul 202624 minutes to read

This section describes how to integrate the Syncfusion React Sankey Chart component into a new React application. You’ll learn about dependencies, installation steps, and how to create your first Sankey Chart visualization.

Prerequisites

Before getting started, ensure that your development environment meets the system requirements for Syncfusion® React UI components. That page documents the supported React, Node.js, and npm versions, and includes the React-version compatibility table for Syncfusion React components.

  • Basic knowledge of React and TypeScript (recommended)
  • A code editor like Visual Studio Code

Dependencies

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

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

Installation and Configuration

Setting Up the React Development Environment

To easily set up a React application, use the Vite CLI (npm create vite), which provides:

  • Faster development environment with instant hot module replacement (HMR)
  • Smaller bundle sizes
  • Optimized production builds
  • Better performance compared to traditional tools like create-react-app

For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.

Note: To create a React application using create-react-app instead, refer to this documentation for more details.

To create a new React application, run the following command.

npm create vite@latest my-app

This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.

Initial_setup

Choose React from the framework list, then select either the TypeScript or JavaScript variant. The next two sections show the exact commands for each variant.

To set up a React application in TypeScript environment, run the following command.

npm create vite@latest my-app -- --template react-ts
cd my-app

To set up a React application in JavaScript environment, run the following command.

npm create vite@latest my-app -- --template react
cd my-app

After the project is created, start the development server with:

npm run dev

Install Syncfusion® Sankey Chart Package

All Essential® JS 2 packages are published on the npmjs.com public registry.

To install the Sankey Chart package, run the following command:

npm install @syncfusion/ej2-react-charts

The package is added to the dependencies section of the package.json file automatically. The --save flag is no longer required for npm 5 and later.

Add Sankey Chart to the project

Add the Sankey Chart component to your entry file (src/App.jsx or src/App.tsx):

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  SankeyComponent, Inject, SankeyTooltip, SankeyLegend,
  SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';

function App() {
  return (
    <div className="control-pane">
      <div className="control-section" id="sankey-container">
        <SankeyComponent
          width="90%"
          height="420px"
          title="Sankey Chart"
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="A" />
            <SankeyNodeDirective id="B" />
            <SankeyNodeDirective id="C" />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="A" targetId="B" value={100} />
            <SankeyLinkDirective sourceId="B" targetId="C" value={80} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  SankeyComponent, Inject, SankeyTooltip, SankeyLegend,
  SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';

function App() {
  return (
    <div className="control-pane">
      <div className="control-section" id="sankey-container">
        <SankeyComponent
          width="90%"
          height="420px"
          title="Sankey Chart"
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="A" />
            <SankeyNodeDirective id="B" />
            <SankeyNodeDirective id="C" />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="A" targetId="B" value={100} />
            <SankeyLinkDirective sourceId="B" targetId="C" value={80} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));

Add data to Sankey Chart

Now you can add data to the Sankey Chart control by defining nodes and links. Nodes represent the categories, and links represent the flow between them.

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  SankeyComponent,
  Inject,
  SankeyTooltip,
  SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';

function App() {
  return (
    <div className="control-pane">
      <div className="control-section" id="sankey-container">
        <SankeyComponent
          width="90%"
          height="420px"
          title="Energy Flow Diagram"
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Energy Input" label={{ text: 'Energy Input' }} />
            <SankeyNodeDirective id="Generation" label={{ text: 'Generation' }} />
            <SankeyNodeDirective id="Distribution" label={{ text: 'Distribution' }} />
            <SankeyNodeDirective id="Consumption" label={{ text: 'Consumption' }} />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Energy Input" targetId="Generation" value={500} />
            <SankeyLinkDirective sourceId="Generation" targetId="Distribution" value={450} />
            <SankeyLinkDirective sourceId="Distribution" targetId="Consumption" value={400} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';

function App() {
  return (
    <div className="control-pane">
      <div className="control-section" id="sankey-container">
        <SankeyComponent
          width="90%"
          height="420px"
          title="Energy Flow Diagram"
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Energy Input" label={{ text: 'Energy Input' }} />
            <SankeyNodeDirective id="Generation" label={{ text: 'Generation' }} />
            <SankeyNodeDirective id="Distribution" label={{ text: 'Distribution' }} />
            <SankeyNodeDirective id="Consumption" label={{ text: 'Consumption' }} />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Energy Input" targetId="Generation" value={500} />
            <SankeyLinkDirective sourceId="Generation" targetId="Distribution" value={450} />
            <SankeyLinkDirective sourceId="Distribution" targetId="Consumption" value={400} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));

Module injection

Sankey Chart component provides support for tooltip and legend interactions. To enable these features, you need to inject the required modules into the component.

  • SankeyTooltip - Inject this module to enable tooltip feature.
  • SankeyLegend - Inject this module to enable legend feature.

These modules are tree-shakable; only the ones you inject are added to the bundle. Import the modules from the chart package and inject them into the component as follows.

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';

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

  return (
    <div className="control-pane">
      <div className="control-section" id="sankey-container">
        <SankeyComponent
          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}
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Electricity Generation" offset={-120} />
            <SankeyNodeDirective id="Residential" offset={38} />
            <SankeyNodeDirective id="Commercial" offset={36} />
            <SankeyNodeDirective id="Industrial" offset={34} />
            <SankeyNodeDirective id="Transportation" offset={32} />
            <SankeyNodeDirective id="Rejected Energy" offset={-40} />
            <SankeyNodeDirective id="Energy Services" />
            <SankeyNodeDirective id="Solar" />
            <SankeyNodeDirective id="Nuclear" />
            <SankeyNodeDirective id="Wind" />
            <SankeyNodeDirective id="Geothermal" />
            <SankeyNodeDirective id="Natural Gas" />
            <SankeyNodeDirective id="Coal" />
            <SankeyNodeDirective id="Biomass" />
            <SankeyNodeDirective id="Petroleum" offset={-10} />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Solar" targetId="Electricity Generation" value={454} />
            <SankeyLinkDirective sourceId="Nuclear" targetId="Electricity Generation" value={185} />
            <SankeyLinkDirective sourceId="Wind" targetId="Electricity Generation" value={47.8} />
            <SankeyLinkDirective sourceId="Geothermal" targetId="Electricity Generation" value={40} />
            <SankeyLinkDirective sourceId="Natural Gas" targetId="Electricity Generation" value={800} />
            <SankeyLinkDirective sourceId="Coal" targetId="Electricity Generation" value={28.7} />
            <SankeyLinkDirective sourceId="Biomass" targetId="Electricity Generation" value={50} />
            <SankeyLinkDirective sourceId="Electricity Generation" targetId="Residential" value={182} />
            <SankeyLinkDirective sourceId="Natural Gas" targetId="Residential" value={400} />
            <SankeyLinkDirective sourceId="Petroleum" targetId="Residential" value={50} />
            <SankeyLinkDirective sourceId="Electricity Generation" targetId="Commercial" value={351} />
            <SankeyLinkDirective sourceId="Natural Gas" targetId="Commercial" value={300} />
            <SankeyLinkDirective sourceId="Electricity Generation" targetId="Industrial" value={641} />
            <SankeyLinkDirective sourceId="Natural Gas" targetId="Industrial" value={786} />
            <SankeyLinkDirective sourceId="Biomass" targetId="Industrial" value={563} />
            <SankeyLinkDirective sourceId="Petroleum" targetId="Industrial" value={300} />
            <SankeyLinkDirective sourceId="Electricity Generation" targetId="Transportation" value={20} />
            <SankeyLinkDirective sourceId="Natural Gas" targetId="Transportation" value={51} />
            <SankeyLinkDirective sourceId="Biomass" targetId="Transportation" value={71} />
            <SankeyLinkDirective sourceId="Petroleum" targetId="Transportation" value={2486} />
            <SankeyLinkDirective sourceId="Residential" targetId="Rejected Energy" value={432} />
            <SankeyLinkDirective sourceId="Commercial" targetId="Rejected Energy" value={351} />
            <SankeyLinkDirective sourceId="Industrial" targetId="Rejected Energy" value={972} />
            <SankeyLinkDirective sourceId="Transportation" targetId="Rejected Energy" value={1920} />
            <SankeyLinkDirective sourceId="Residential" targetId="Energy Services" value={200} />
            <SankeyLinkDirective sourceId="Commercial" targetId="Energy Services" value={300} />
            <SankeyLinkDirective sourceId="Industrial" targetId="Energy Services" value={755} />
            <SankeyLinkDirective sourceId="Transportation" targetId="Energy Services" value={637} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
    SankeyNodeDirective,
    SankeyNodesCollectionDirective,
    SankeyLinkDirective,
    SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';

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

    return (
        <div className="control-pane">
            <div className="control-section">
                <SankeyComponent
                    id="sankey-container"
                    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}
                >
                    <SankeyNodesCollectionDirective>
                        <SankeyNodeDirective id="Electricity Generation" offset={-120} />
                        <SankeyNodeDirective id="Residential" offset={38} />
                        <SankeyNodeDirective id="Commercial" offset={36} />
                        <SankeyNodeDirective id="Industrial" offset={34} />
                        <SankeyNodeDirective id="Transportation" offset={32} />
                        <SankeyNodeDirective id="Rejected Energy" offset={-40} />
                        <SankeyNodeDirective id="Energy Services" />
                        <SankeyNodeDirective id="Solar" />
                        <SankeyNodeDirective id="Nuclear" />
                        <SankeyNodeDirective id="Wind" />
                        <SankeyNodeDirective id="Geothermal" />
                        <SankeyNodeDirective id="Natural Gas" />
                        <SankeyNodeDirective id="Coal" />
                        <SankeyNodeDirective id="Biomass" />
                        <SankeyNodeDirective id="Petroleum" offset={-10} />
                    </SankeyNodesCollectionDirective>
                    <SankeyLinksCollectionDirective>
                        <SankeyLinkDirective sourceId="Solar" targetId="Electricity Generation" value={454} />
                        <SankeyLinkDirective sourceId="Nuclear" targetId="Electricity Generation" value={185} />
                        <SankeyLinkDirective sourceId="Wind" targetId="Electricity Generation" value={47.8} />
                        <SankeyLinkDirective sourceId="Geothermal" targetId="Electricity Generation" value={40} />
                        <SankeyLinkDirective sourceId="Natural Gas" targetId="Electricity Generation" value={800} />
                        <SankeyLinkDirective sourceId="Coal" targetId="Electricity Generation" value={28.7} />
                        <SankeyLinkDirective sourceId="Biomass" targetId="Electricity Generation" value={50} />
                        <SankeyLinkDirective sourceId="Electricity Generation" targetId="Residential" value={182} />
                        <SankeyLinkDirective sourceId="Natural Gas" targetId="Residential" value={400} />
                        <SankeyLinkDirective sourceId="Petroleum" targetId="Residential" value={50} />
                        <SankeyLinkDirective sourceId="Electricity Generation" targetId="Commercial" value={351} />
                        <SankeyLinkDirective sourceId="Natural Gas" targetId="Commercial" value={300} />
                        <SankeyLinkDirective sourceId="Electricity Generation" targetId="Industrial" value={641} />
                        <SankeyLinkDirective sourceId="Natural Gas" targetId="Industrial" value={786} />
                        <SankeyLinkDirective sourceId="Biomass" targetId="Industrial" value={563} />
                        <SankeyLinkDirective sourceId="Petroleum" targetId="Industrial" value={300} />
                        <SankeyLinkDirective sourceId="Electricity Generation" targetId="Transportation" value={20} />
                        <SankeyLinkDirective sourceId="Natural Gas" targetId="Transportation" value={51} />
                        <SankeyLinkDirective sourceId="Biomass" targetId="Transportation" value={71} />
                        <SankeyLinkDirective sourceId="Petroleum" targetId="Transportation" value={2486} />
                        <SankeyLinkDirective sourceId="Residential" targetId="Rejected Energy" value={432} />
                        <SankeyLinkDirective sourceId="Commercial" targetId="Rejected Energy" value={351} />
                        <SankeyLinkDirective sourceId="Industrial" targetId="Rejected Energy" value={972} />
                        <SankeyLinkDirective sourceId="Transportation" targetId="Rejected Energy" value={1920} />
                        <SankeyLinkDirective sourceId="Residential" targetId="Energy Services" value={200} />
                        <SankeyLinkDirective sourceId="Commercial" targetId="Energy Services" value={300} />
                        <SankeyLinkDirective sourceId="Industrial" targetId="Energy Services" value={755} />
                        <SankeyLinkDirective sourceId="Transportation" targetId="Energy Services" value={637} />
                    </SankeyLinksCollectionDirective>
                    <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
                </SankeyComponent>
            </div>
        </div>
    );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));

Run the Development Server

Now run the npm run dev command in the console to start the development server. This command compiles your code and serves the application locally in your browser at http://localhost:5173 by default.

npm run dev

To stop the development server, press Ctrl+C in the terminal.

Troubleshooting

  • Module not found: Can't resolve '@syncfusion/ej2-react-charts' — Package not installed or wrong working directory. Run npm install @syncfusion/ej2-react-charts inside the project root.
  • Tooltip/legend don’t appear — Modules not injected. Ensure SankeyTooltip and/or SankeyLegend are passed to the Inject service as shown in the “Module injection” step.
  • ERESOLVE peer-dependency errors — Mismatched React version. Install a supported React version (18 or 19) and rerun npm install.

See also

  • Explore the full SankeyChart API reference for all props, events, and methods.