ParallelCoordinates

@nivo/parallel-coordinatessvgisomorphic
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.

The @nivo/parallel-coordinates package also exposes a ParallelCoordinatesLayout component which can be used to build your very own chart. You can see how it's used to build the ParallelCoordinates component here.

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[]optional
Variables configuration.
temp (linear)
optional
Variable key, used to access to corresponding datum value.
optional
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
optional
Define style for common elements such as labels, axes…
string | Function | string[]optionaldefault:{"scheme":"yellow_orange_red"}
yellow_orange_red
Defines color range.
numberoptionaldefault:2
px
Lines stroke width.
numberoptionaldefault:0.35
Lines opacity.
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
supportsvgcanvas
string | objectoptionaldefault:'gentle'
gentle
Motion config for react-spring, either a preset or a custom configuration.
supportsvgcanvas