Sankey HTTP API

POST /charts/sankey
svghttp api

The Sankeycomponent is available in the nivo HTTP rendering API. The API generates a SVG and return a path to this SVG which can then be easily embedded.

The api accepts almost the same properties as the regular component, in json, however it's not interactive and you cannot use code in properties (functions).

Please note that the demo API server is installed on heroku using a free plan, so it might be unavailable from times to times.

Click the generate button in order to generate the chart.
You can customize settings by using dedicated controls.
generate
Response n/a
no response available
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
px

Chart width.

numberrequired
px

Chart height.

objectoptional
px
px
px
px

Chart margin.

Style
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Categorical: Category 10

Define chart's colors.

Nodes
numberoptionaldefault:12
px

Node thickness.

numberoptionaldefault:0.75

Node opacity (0~1).

numberoptionaldefault:1

Node opacity on hover (0~1).

supportsvgapi
numberoptionaldefault:0.15

Other nodes opacity on hover (0~1).

supportsvgapi
numberoptionaldefault:12
px

Spacing between nodes at an identical level.

numberoptionaldefault:0
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.

numberoptionaldefault:0
px

Node border radius.

Links
numberoptionaldefault:0.25

Link opacity (0~1).

numberoptionaldefault:0.6

Link opacity on hover(0~1).

supportsvgapi
numberoptionaldefault:0.15

Other links opacity on hover (0~1).

supportsvgapi
numberoptionaldefault:0
px

Contract link width.

CssMixBlendModeoptionaldefault:'multiply'

Define CSS mix-blend-mode for links.

supportsvgapi
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.

supportsvgapi
FunctionComponent<{ node: SankeyNodeDatum }>optional

Tooltip custom component for nodes.

supportsvgapi
FunctionComponent<{ link: SankeyLinkDatum }>optional

Tooltip custom component for links.

supportsvgapi
(target: SankeyNodeDatum | SankeyLinkDatum, event) => voidoptional

onClick handler, it receives target node or link data and mouse event.

supportsvgapi
Motion
booleanoptionaldefault:true

Enable/disable transitions.

supportsvgapi
string | objectoptionaldefault:'gentle'

Motion config for react-spring, either a preset or a custom configuration.

supportsvgapi