React ChartsSankey Series

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

Simple Sankey Copy Link

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.

Node Layout Copy Link

Horizontal Alignment Copy Link

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

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

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.

Vertical Alignment Copy Link

The vertical placement of the nodes can be customised using the verticalAlignment property on node.

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

There are three values supported:

• top moves nodes as far up as possible.
• bottom moves nodes as far down as possible.
• center places the nodes in the middle and distributes evenly in each direction.

Sorting Copy Link

The order of the nodes can be customised using the sort property on node.

There are three values supported:

• data sorts nodes in the same order as they first appear in the data array.
• ascending and descending sort nodes alphanumerically by their displayed labels.
• auto sorts nodes to reduce overlapping links and produce a cleaner layout.

Label Placement Copy Link

Labels can be placed to the left, right or centred over nodes using the placement property.

The optional edgePlacement property sets the first and last node labels to 'inside' or 'outside', defaulting to the placement value if unspecified.

Customisation Copy Link

Node Style Copy Link

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 Copy Link

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,
            },
        },
    ],
}

API Reference Copy Link