React ChartsSankey Series

A Sankey Series visualises movement or change between different items, using nodes and links.

Simple Sankey

To create a Sankey Series, use the sankey series type.

series: [
    {
        type: 'sankey',
        fromKey: 'from',
        toKey: 'to',
        sizeKey: 'size',
    },
],

In this configuration:

fromKey defines the start node of each link.
toKey defines the end node of each link.
sizeKey defines the size of each link.

Circular loops are not allowed in Sankey diagrams, and links forming a circular loop will be removed.

Alignment

The horizontal placement of the nodes can be customised using the align property on node.

series: [
    {
        type: 'sankey',
        fromKey: 'from',
        toKey: 'to',
        sizeKey: 'size',
        node: {
            align: 'justify',
        },
    },
],

There are four values supported:

left moves nodes as far left as possible.
right moves nodes as far right as possible.
center moves nodes as close to the centre as possible.
justify moves nodes as far left as possible, except for the last nodes, which are pushed right.

Customisation

Node Style

The styling of all nodes can be customised using the node property.

series: [
    {
        type: 'sankey',
        fromKey: 'from',
        toKey: 'to',
        sizeKey: 'size',
        node: {
            fill: '#34495e',
            stroke: '#2c3e50',
            strokeWidth: 2,
        },
    },
],

Link Style

The styling of all links can be customised using the link property.

series: [
    {
        type: 'sankey',
        fromKey: 'from',
        toKey: 'to',
        sizeKey: 'size',
        link: {
            fill: '#34495e',
            fillOpacity: 0.25,
            stroke: '#2c3e50',
            strokeWidth: 1,
            strokeOpacity: 0.25,
        },
    },
],

Getting started

Core features

Specialised Charts

Series