ParallelCoordinatesCanvas

@nivo/parallel-coordinatescanvas

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
object[] | Array[]required

Chart data.

stringoptionaldefault:'horizontal'

Chart layout.

stringoptionaldefault:'linear'
linear

Curve interpolation.

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
VariableSpec<Datum>[]required

Variables configuration.

temp (temp)
stringrequired

Variable id, unique identifier for this variable.

stringrequired

Variable value, used to access to corresponding datum value.

number | 'auto'optional
auto

Min value.

number | 'auto'optional
auto

Max value of linear scale.

cost (cost)
weight (weight)
volume (volume)
Style
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"category10"}
Categorical: Category 10

Define chart's colors.

numberoptionaldefault:2
px

Lines width.

numberoptionaldefault:0.5

Lines opacity.

Legends
LegendDatum<D>[]optional

Optional chart's legends.

add legend
legends[0]remove
stringoptional
bottom-right

Defines legend anchor relative to chart's viewport.

'column' | 'row'optional

Legend direction, must be one of 'column', 'row'.

booleanoptional
   

Justify symbol and label.

numberoptional
px

Legend block x translation.

numberoptional
px

Legend block y translation.

numberrequired
px

Legend item width.

numberrequired
px

Legend item height.

numberoptional
px

Spacing between each item.

numberoptional
px

Item symbol size.

stringoptional
left-to-right

Item layout direction.

Motion
booleanoptionaldefault:true
   

Enable/disable transitions.

string | objectoptionaldefault:'gentle'
gentle

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

Accessibility
stringoptional

Main element role attribute.

stringoptional

Main element aria-label.

stringoptional

Main element aria-labelledby.

stringoptional

Main element aria-describedby.