ParallelCoordinates

@nivo/parallel-coordinates
svgcanvas

Parallel coordinates chart, supports continuous numerical variables and discrete values.

The responsive alternative of this component is ResponsiveParallelCoordinates, it also offers another implementation, see ParallelCoordinatesCanvas.

Actions Logs
Start interacting with the chart to log actions
Base
<Datum>[]required

Chart data.

Variable<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)
stringoptional

Optionally group your data on a given property.

BaseGroup[]optional

Explicitly specify available groups (only works with groupBy).

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.

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.

Customization
ParallelCoordinatesLayer<Datum>[] | ParallelCoordinatesCanvasLayer<Datum>[]optionaldefault:['lines', 'axes', 'legends']

Define layers, please use the appropriate variant for custom layers.

Legends
(data: LegendDatum<D>[]) => voidoptional

Can be used to get the computed legend data.

LegendDatum<D>[]optional

Optional chart's legends.

add legend
legends[0]remove
stringoptional
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.