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
Labels
Customization
Interactivity
Legends
Motion
Recipes
Custom arc & ribbon tooltip