Chord HTTP API

POST /charts/chord

The Chordcomponent 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
string[]required
Keys used to identify each cell in the matrix.
Array<number[]>required
The matrix used to compute the chord diagram.
string | Functionoptional
Optional value formatter.
numberrequired
Chart width.
numberrequired
Chart height.
numberoptionaldefault:'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
supportsvgcanvasapi
objectoptional
px
px
px
px
Chart margin.
numberoptionaldefault:0
Padding angle.
numberoptionaldefault:0.9
Inner radius ratio.
numberoptionaldefault:0
Inner radius offset (minus innerRadiusRatio).
Style
optional
Define style for common elements such as labels, axes…
string | Function | string[]optionaldefault:{"scheme":"nivo"}
nivo
Defines how to compute arc/ribbon color.
numberoptionaldefault:1
Arcs opacity.
numberoptionaldefault:1
px
Arcs border width.
string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",0.4]]}
inheritthemecustom
inherited property
color
modifiers
darker
Arcs border color.
numberoptionaldefault:0.5
Ribbons opacity.
numberoptionaldefault:1
px
Ribbons border width.
string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",0.4]]}
inheritthemecustom
inherited property
color
modifiers
darker
Ribbons border color.
Labels
booleanoptionaldefault:true
   Enable/disable labels.
string | Functionoptionaldefault:'id'
id
Defines how to get label text, can be a string (used to access current arc data property) or a function which will receive the actual arc data.
numberoptionaldefault:12
px
Label offset from arc.
numberoptionaldefault:0
°
Label rotation.
string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",1]]}
inheritthemecustom
inherited property
color
modifiers
darker
Method to compute label text color.
Customization
Array<string | Function>optionaldefault:['ribbons', 'arcs', 'labels', 'legends']
Defines the order of layers and add custom layers.
Interactivity
booleanoptionaldefault:true
Enable/disable interactivity.
supportsvgcanvasapi
numberoptionaldefault:1
Arc opacity when hover (0~1).
supportsvgcanvasapi
numberoptionaldefault:0.15
Arc opacity when not hover (0~1).
supportsvgcanvasapi
numberoptionaldefault:0.85
Ribbon opacity when hover (0~1).
supportsvgcanvasapi
numberoptionaldefault:0.15
Ribbon opacity when not hover (0~1).
supportsvgcanvasapi
(arc, event) => voidoptional
onMouseEnter handler for arcs.
supportsvgcanvasapi
(arc, event) => voidoptional
onMouseMove handler for arcs.
supportsvgcanvasapi
(arc, event) => voidoptional
onMouseLeave handler for arcs.
supportsvgcanvasapi
(arc, event) => voidoptional
onClick handler for arcs.
supportsvgcanvasapi
Functionoptional
Custom arc tooltip component.
supportsvgcanvasapi
(ribbon, event) => voidoptional
onMouseEnter handler for ribbons.
supportsvgcanvasapi
(ribbon, event) => voidoptional
onMouseMove handler for ribbons.
supportsvgcanvasapi
(ribbon, event) => voidoptional
onMouseLeave handler for ribbons.
supportsvgcanvasapi
(ribbon, event) => voidoptional
onClick handler for ribbons.
supportsvgcanvasapi
Functionoptional
Custom ribbon tooltip component.
supportsvgcanvasapi
Legends
object[]optional
Optional chart's legends.
supportsvgcanvasapi
Motion
booleanoptionaldefault:true
Enable/disable transitions.
supportsvgcanvasapi
numberoptionaldefault:90
Motion stiffness.
supportsvgcanvasapi
numberoptionaldefault:15
Motion damping.
supportsvgcanvasapi