Computes a sankey diagram from nodes and links, built
on top of d3-sankey.
The responsive alternative of this component is ResponsiveSankey
.
Please be careful with the data you use for this chart as
it does not support cyclic dependencies.
For example, something like A —> A
or A —> B —> C —> A
will crash.
This component is available in the @nivo/api
,
see sample or
try it using the API client.
You can also see more example usages in
the storybook.
See the dedicated guide on how to setup legends for this component.
Chart data defining nodes and links.
Optional formatter for values.
'horizontal'
Control sankey layout direction.
'center'
Node alignment method.
'auto'
Node sorting method.
Chart width.
Chart height.
Chart margin.
Define style for common elements such as labels, axes…
Define chart's colors.
12
Node thickness.
0.75
Node opacity (0~1).
1
Node opacity on hover (0~1).
0.15
Other nodes opacity on hover (0~1).
12
Spacing between nodes at an identical level.
0
Node inner padding, distance from link, substracted from nodeThickness.
1
Node border width.
Method to compute node border color.
0
Node border radius.
0.25
Link opacity (0~1).
0.6
Link opacity on hover(0~1).
0.15
Other links opacity on hover (0~1).
0
Contract link width.
false
Enable/disable gradient from source/target nodes instead of plain color.
true
Enable/disable labels.
'inside'
Label position.
9
Label padding from node.
Method to compute label text color.
'horizontal'
Label orientation.
true
Enable/disable interactivity.
Tooltip custom component for nodes.
Tooltip custom component for links.
onClick handler, it receives target node or link data and mouse event.
true
Enable/disable transitions.
'gentle'
Motion config for react-spring, either a preset or a custom configuration.