ParallelCoordinatesCanvas

@nivo/parallel-coordinatescanvas
svgcanvas

A variation around the ParallelCoordinates component. Well suited for large data sets as it does not impact DOM tree depth, however you'll lose the isomorphic ability and transitions.

The responsive alternative of this component is ResponsiveParallelCoordinatesCanvas.

320 nodes
Actions Logs
Start interacting with the chart to log actions
Base
Array<object | Array>required

Chart data.

stringoptionaldefault:'horizontal'

Chart layout.

stringoptionaldefault:'linear'
linear

Curve interpolation.

stringoptionaldefault:'foreground'

Axes plan.

stringoptionaldefault:'after'

Axes ticks position.

numberrequired

Chart width.

numberrequired

Chart height.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvas
objectoptional
px
px
px
px

Chart margin.

Variables
object[]required

Variables configuration.

temp (linear)
stringrequired

Variable key, used to access to corresponding datum value.

'linear' | 'point'required

Variable type, must be one of: 'linear', 'point'.

number | 'auto'optional
auto

Min value of linear scale.

number | 'auto'optional
auto

Max value of linear scale.

cost (linear)
color (point)
target (point)
volume (linear)
Style
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"yellow_orange_red"}
Sequential: Yellow → Orange → Red

Define chart's colors.

numberoptionaldefault:2
px

Lines stroke width.

numberoptionaldefault:0.35

Lines opacity.

Motion
booleanoptionaldefault:true

Enable/disable transitions.

supportsvgcanvas
string | objectoptionaldefault:'gentle'

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

supportsvgcanvas