Getting Started with React Sankey Chart

10 Aug 202616 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.

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

Set up a development environment

To set up a React application quickly, use create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up the environment using JavaScript and optimizes applications for production.

As an alternative, you can create a React application using create-react-app. For detailed instructions, refer to this documentation.

To create a new React application, run one of the following commands based on your preferred language:

React with JavaScript

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

React with TypeScript

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

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → ESLint
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Then, navigate to the project directory:

cd my-app

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

Add the Sankey Chart to the project

Open the application entry file (src/App.jsx or src/App.tsx) and the Sankey Chart component using the following code.

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

Inject Required Modules

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 in to services to use the tooltip feature.
  • SankeyLegend - Inject this module in to services to use the legend feature.

Import the required module from the Chart package and register it through the Inject component as shown below.

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

Run the application

Run the application using the following command:

npm run dev

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