Line

@nivo/linesvgisomorphic

Line chart with stacking ability.

Given an array of data series having an id and a nested array of points (with x, y properties), it will compute the line for each data serie. All datum having null x or y will be treated as holes, thus portions of the corresponding line will be skipped.

The responsive alternative of this component is ResponsiveLine.

This component is available in the @nivo/api, see sample or try it using the API client.

See the dedicated guide on how to setup legends for this component.

Actions Logs
Start interacting with the chart to log actions
Base
object[]required
Chart data.
objectoptional
px
px
px
px
Chart margin.
optionaldefault:['grid', 'markers', 'axes', 'areas', 'lines', 'slices', 'dots', 'legends']
Defines the order of layers.
stringoptionaldefault:'linear'
linear
Curve interpolation.
objectoptional
X scale configuration.
objectoptional
Y scale configuration.
Style
string | Function | string[]optionaldefault:{"scheme":"nivo"}
nivo
Defines color range.
numberoptionaldefault:2
px
Line width.
booleanoptionaldefault:false
   Enable/disable area below each line.
number | string | Dateoptionaldefault:0
Define the value to be used for area baseline.
numberoptionaldefault:0.2
Area opacity (0~1), depends on enableArea.
stringoptionaldefault:'normal'
normal
Defines CSS mix-blend-mode property.
Dots
booleanoptionaldefault:true
   Enable/disable dots.
numberoptionaldefault:6
px
Size of the dots.
string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
theme property
background
Method to compute dots color.
numberoptionaldefault:0
px
Width of the dots border.
string | object | Functionoptionaldefault:{"theme":"background"}
inheritthemecustom
inherited property
color
modifiers
No modifier.
Method to compute dots border color.
booleanoptionaldefault:false
   Enable/disable dots label.
stringoptional
y
Property to use to determine dot label. If a function is provided, it will receive current value and serie and must return a label.
numberoptionaldefault:-12
px
Label Y offset from dot shape.
Grid & Axes
booleanoptionaldefault:true
   Enable/disable x grid.
Array<number | string>optional
Specify values to use for vertical grid lines.
booleanoptionaldefault:true
   Enable/disable y grid.
Array<number | string>optional
Specify values to use for horizontal grid lines.
objectoptional
Top axis configuration.
objectoptional
Right axis configuration.
objectoptional
Bottom axis configuration.
objectoptional
Left axis configuration.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
booleanoptionaldefault:true
   Enable/disable stack tooltip ('isInteractive' must also be 'true').
Functionoptional
Method to create custom tooltip
Legends
object[]optional
Optional chart's legends.
add legend
legend[0]: bottom-right, columnremove
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.
numberoptionaldefault:90
Motion stiffness.
numberoptionaldefault:13
Motion damping.