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.
Circular loops are not allowed in Sankey diagrams, and links forming a circular loop will be removed.
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 thedata
array.a-z
andz-a
sort nodes alphanumerically by their displayed labels.weight
sorts nodes to reduce overlapping links and produce a cleaner layout.
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,
},
},
],
}