A variation around the Chord component. Well suited for large data sets as it does not impact DOM tree depth, however you'll lose the isomorphic ability and transitions (for now).
The responsive alternative of this component is
ResponsiveChordCanvas
.
The matrix used to compute the chord diagram.
Keys used to identify each cell in the matrix.
Optional value formatter.
Chart width.
Chart height.
'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
Chart margin.
0
Padding angle.
0.9
Inner radius ratio.
0
Inner radius offset (minus innerRadiusRatio).
Define style for common elements such as labels, axes…
Defines how to compute arcs & ribbons color.
1
Arcs opacity.
1
Arcs border width.
Arcs border color.
0.5
Ribbons opacity.
1
Ribbons border width.
Ribbons border color.
true
Enable/disable labels.
'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.
12
Label offset from arc.
0
Label rotation.
Method to compute label text color.
'ribbons'
, 'arcs'
, 'labels'
, 'legends'
]Defines the order of layers and add custom layers.
true
Enable/disable interactivity.
1
Arc opacity when active.
0.15
Arc opacity when inactive.
0.85
Ribbon opacity when active.
0.15
Ribbon opacity when inactive.
onMouseEnter handler for arcs.
onMouseMove handler for arcs.
onMouseLeave handler for arcs.
onClick handler for arcs.
Custom arc tooltip component.
onMouseEnter handler for ribbons.
onMouseMove handler for ribbons.
onMouseLeave handler for ribbons.
onClick handler for ribbons.
Custom ribbon tooltip component.
Optional chart's legends.
Defines legend anchor relative to chart's viewport.
Legend direction, must be one of 'column', 'row'.
Justify symbol and label.
Legend block x translation.
Legend block y translation.
Legend item width.
Legend item height.
Spacing between each item.
Item symbol size.
Item layout direction.
true
Enable/disable transitions.
'gentle'
Motion config for react-spring, either a preset or a custom configuration.