Chord

@nivo/chordrelationalsvgisomorphic
svgcanvashttp api

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
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.
add legend
legend[0]: bottom, rowremove
stringoptional
bottom
Defines legend anchor relative to chart's viewport.
supportsvgcanvasapi
'column' | 'row'optional
Legend direction, must be one of 'column', 'row'.
supportsvgcanvasapi
booleanoptional
   Justify symbol and label.
supportsvgcanvasapi
numberoptional
px
Legend block x translation.
supportsvgcanvasapi
numberoptional
px
Legend block y translation.
supportsvgcanvasapi
numberrequired
px
Legend item width.
supportsvgcanvasapi
numberrequired
px
Legend item height.
supportsvgcanvasapi
numberoptional
px
Spacing between each item.
supportsvgcanvasapi
numberoptional
px
Item symbol size.
supportsvgcanvasapi
stringoptional
left-to-right
Item layout direction.
supportsvgcanvasapi
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
supportsvgcanvasapi
numberoptionaldefault:90
Motion stiffness.
supportsvgcanvasapi
numberoptionaldefault:15
Motion damping.
supportsvgcanvasapi