Chord HTTP API

POST /charts/chord
svgcanvashttp api

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
number[][]required

The matrix used to compute the chord diagram.

string[]required

Keys used to identify each cell in the matrix.

string | Functionoptional

Optional value formatter.

numberrequired
px

Chart width.

numberrequired
px

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
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Categorical: Nivo

Defines how to compute arcs & ribbons 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.

CssMixBlendModeoptionaldefault:'normal'

Define CSS mix-blend-mode for ribbons.

supportsvgcanvasapi
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 active.

supportsvgcanvasapi
numberoptionaldefault:0.15

Arc opacity when inactive.

supportsvgcanvasapi
numberoptionaldefault:0.85

Ribbon opacity when active.

supportsvgcanvasapi
numberoptionaldefault:0.15

Ribbon opacity when inactive.

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
string | objectoptionaldefault:'gentle'

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

supportsvgcanvasapi