Sankey

@nivo/sankeyrelationalflow

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 defining nodes and links.

string | (value: number) => stringoptional
open editor

Optional formatter for values.

stringoptionaldefault:'horizontal'

Control sankey layout direction.

stringoptionaldefault:'center'
justify

Node alignment method.

string | Functionoptionaldefault:'auto'
auto

Node sorting method.

numberrequired

Chart width.

numberrequired

Chart height.

objectoptional
px
px
px
px

Chart margin.

Style
Nodes
Links
Customization
Labels
Interactivity
Motion