Chord

@nivo/chordrelational
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
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

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…

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'
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.

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

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

supportsvgcanvasapi
Recipes
Custom arc & ribbon tooltip