Sankey

@nivo/sankeyrelationalflowsvgisomorphic

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.

Actions Logs
Start interacting with the chart to log actions
Base
{ nodes: object[], links: object[] }required
Chart data.
stringoptionaldefault:'horizontal'
Control sankey layout direction.
stringoptionaldefault:'center'
justify
Node alignment method.
string | Functionoptionaldefault:'auto'
auto
Node sorting method.
string | Function | string[]optionaldefault:{"scheme":"nivo"}
category10
Defines how to compute nodes color.
objectoptional
px
px
px
px
Chart margin.
Nodes
numberoptionaldefault:12
px
Node thickness.
numberoptionaldefault:0.75
Node opacity (0~1).
numberoptionaldefault:1
Node opacity on hover (0~1).
numberoptionaldefault:12
px
Spacing between nodes at an identical level.
numberoptional
px
Node inner padding, distance from link, substracted from nodeThickness.
numberoptionaldefault:1
px
Node border width.
string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",0.5]]}
inheritthemecustom
inherited property
color
modifiers
darker
Method to compute node border color.
Links
numberoptionaldefault:0.25
Link opacity (0~1).
numberoptionaldefault:0.6
Link opacity on hover(0~1).
numberoptionaldefault:0
px
Contract link width.
stringoptionaldefault:'multiply'
multiply
Defines CSS mix-blend-mode property for links.
booleanoptionaldefault:false
   Enable/disable gradient from source/target nodes instead of plain color.
Labels
booleanoptionaldefault:true
   Enable/disable labels.
stringoptionaldefault:'inside'
Label position.
numberoptionaldefault:9
px
Label padding from node.
string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",0.8]]}
inheritthemecustom
inherited property
color
modifiers
darker
Method to compute label text color.
stringoptionaldefault:'horizontal'
Label orientation.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
numberoptionaldefault:90
Motion stiffness.
numberoptionaldefault:13
Motion damping.