Chord

@nivo/chordrelational

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.

Start interacting with the chart to log actions

Base

datanumber[][]required

The matrix used to compute the chord diagram.

keysstring[]required

Keys used to identify each cell in the matrix.

valueFormatstring | Functionoptional

Optional value formatter.

widthnumberrequired

Chart width for non-responsive component.

heightnumberrequired

Chart height for non-responsive component.

pixelRationumberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvasapi

marginobjectoptional

top

right

bottom

left

Chart margin.

padAnglenumberoptionaldefault:0

Padding angle.

innerRadiusRationumberoptionaldefault:0.9

Inner radius ratio.

innerRadiusOffsetnumberoptionaldefault:0

Inner radius offset (minus innerRadiusRatio).

refRef<SVGSVGElement | HTMLCanvasElement>optional

Ref to the chart's container. Used on this page to generate/download the chart's image via html-to-image.

supportsvgcanvasapi

Style

Labels

Customization

Interactivity

Legends

Motion