Chord

@nivo/chordrelationalsvgisomorphic

Chord diagram, uses d3-chord, see this demo.

The responsive alternative of this component is ResponsiveChord.

This component is available in the @nivo/api, see sample or try it using the API client.

See the dedicated guide on how to setup legends for this component.

Actions Logs
Start interacting with the chart to log actions
Base
Array<number[]>required
The matrix used to compute the chord diagram.
string[]required
Keys used to identify each cell in the matrix.
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
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.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
numberoptionaldefault:1
Arc opacity when hover (0~1).
numberoptionaldefault:0.15
Arc opacity when not hover (0~1).
numberoptionaldefault:0.85
Ribbon opacity when hover (0~1).
numberoptionaldefault:0.15
Ribbon opacity when not hover (0~1).
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
numberoptionaldefault:90
Motion stiffness.
numberoptionaldefault:13
Motion damping.