chartjs-chart-sankey

Chart.js v3.3+, v4+ module that adds a sankey chart type, drawing flows between named nodes as directional bands whose width is proportional to the flow value — useful for visualizing energy transfers, budgets, funnels, and other flow-style data, for anyone already charting with Chart.js.

Example

Installation

npm install chartjs-chart-sankey

Or via CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-sankey"></script>

Quickstart

import { Chart, LinearScale } from 'chart.js';
import { Flow, SankeyController } from 'chartjs-chart-sankey';

Chart.register(LinearScale, SankeyController, Flow);

new Chart(document.getElementById('chart'), {
  type: 'sankey',
  data: {
    datasets: [
      {
        label: 'My sankey',
        data: [
          {from: 'a', to: 'b', flow: 10},
          {from: 'a', to: 'c', flow: 5},
          {from: 'b', to: 'd', flow: 6},
          {from: 'c', to: 'd', flow: 4},
        ],
      },
    ],
  },
});

See more integration options (script tag, other module loaders) in the documentation.

Documentation

You can find documentation for chartjs-chart-sankey at https://chartjs-chart-sankey.pages.dev/. The full dataset and options reference lives there, not in this README — this file stays a quickstart.

Development

You first need to install node dependencies (requires Node.js):

> npm install

The following commands will then be available from the repository root:

> npm run build        // build dist files
> npm run autobuild     // build and watch for changes
> npm test              // run all tests
> npm run lint          // perform code linting

License

chartjs-chart-sankey is available under the MIT license.