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
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
Themeoptional

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