chartjs-chart-sankey

Chart.js v3.0.0-beta.10 module for creating sankey diagrams

Browser support

All modern and up-to-date browsers are supported, including, but not limited to:

• Chrome
• Edge
• Firefox
• Safari

Internet Explorer 11 is not supported.

Documentation

To create a sankey chart, include chartjs-chart-sankey.js after chart.js and then create the chart by setting the type attribute to 'sankey'

new Chart(ctx, {
    type: 'sankey',
    data: dataObject
});

Configuration

Example:

new Chart(ctx, {
    type: 'sankey',
    data: {
        datasets: [{
            label: 'My sankey',
            data: [
                { from: 'a', to: 'b', flow: 10 },
                { from: 'a', to: 'c', flow: 5},
                { from: 'b', to: 'c', flow: 10 }
            ],
            colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
            colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
            colorMode: 'gradient' // or 'from' or 'to'
        }]
    },
});

Example

Online examples

codepen Vue.js 2

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 autotest          // run all tests and watch for changes
> npm lint              // perform code linting
> npm package           // create an archive with dist files and samples

License

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