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
X scale configuration.
Function | stringoptional
Optional formatter for x values.
objectoptional
Y scale configuration.
Function | stringoptional
Optional formatter for y values.
numberrequired
Chart width, not required when using responsive variant.
numberrequired
Chart height, not required when using responsive variant.
objectoptional
px
px
px
px
Chart margin.
Style
stringoptionaldefault:'linear'
linear
Curve interpolation.
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.
supportsvgcanvasapi
Customization
optionaldefault:['grid', 'markers', 'axes', 'areas', 'crosshair', 'lines', 'points', 'slices', 'mesh', 'legends']
Defines the order of layers and add custom layers.
Points
booleanoptionaldefault:true
   Enable/disable points.
Functionoptional
Overrides default point circle. The function will receive `size`, `color`, `borderWidth` and `borderColor` props and must return a valid SVG element.
supportsvgcanvasapi
numberoptionaldefault:6
px
Size of the points.
string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
theme property
background
Method to compute points color.
numberoptionaldefault:0
px
Width of the points border.
string | object | Functionoptionaldefault:{"theme":"background"}
inheritthemecustom
inherited property
Select...
modifiers
No modifier.
Method to compute points border color.
booleanoptionaldefault:false
   Enable/disable points label.
supportsvgcanvasapi
stringoptional
y
Property to use to determine point label. If a function is provided, it will receive current point data and should return the desired label.
supportsvgcanvasapi
numberoptionaldefault:-12
px
Label Y offset from point shape.
supportsvgcanvasapi
Grid & Axes
booleanoptionaldefault:true
   Enable/disable x grid.
Array<number | string | Date>optional
Specify values to use for vertical grid lines.
booleanoptionaldefault:true
   Enable/disable y grid.
Array<number | string | Date>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.
supportsvgcanvasapi
booleanoptionaldefault:false
   Use a voronoi mesh to detect mouse interactions, enableSlices msut be disabled
supportsvgcanvasapi
booleanoptionaldefault:false
   Display mesh used to detect mouse interactions (voronoi cells).
supportsvgcanvasapi
(point, event) => voidoptional
onMouseEnter handler, doesn't work with slice tooltip.
supportsvgcanvasapi
(point, event) => voidoptional
onMouseMove handler, doesn't work with slice tooltip.
supportsvgcanvasapi
(point, event) => voidoptional
onMouseLeave handler, doesn't work with slice tooltip.
supportsvgcanvasapi
(point, event) => voidoptional
onClick handler, doesn't work with slice tooltip.
supportsvgcanvasapi
Functionoptional
Custom point tooltip
supportsvgcanvasapi
'x' | 'y' | falseoptional
false
Enable/disable slices tooltip for x or y axis, automatically disable mesh.
supportsvgcanvasapi
booleanoptionaldefault:false
   Display area used to detect mouse interactions for slices.
supportsvgcanvasapi
Functionoptional
Custom slice tooltip
supportsvgcanvasapi
booleanoptionaldefault:true
   Enable/disable crosshair.
supportsvgcanvasapi
stringoptionaldefault:'bottom-left'
bottom-left
Crosshair type, forced to slices axis if enabled.
supportsvgcanvasapi
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.
supportsvgcanvasapi
'column' | 'row'optional
Legend direction, must be one of 'column', 'row'.
supportsvgcanvasapi
booleanoptional
   Justify symbol and label.
supportsvgcanvasapi
numberoptional
px
Legend block x translation.
supportsvgcanvasapi
numberoptional
px
Legend block y translation.
supportsvgcanvasapi
numberrequired
px
Legend item width.
supportsvgcanvasapi
numberrequired
px
Legend item height.
supportsvgcanvasapi
numberoptional
px
Spacing between each item.
supportsvgcanvasapi
numberoptional
px
Item symbol size.
supportsvgcanvasapi
stringoptional
left-to-right
Item layout direction.
supportsvgcanvasapi
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
supportsvgcanvasapi
numberoptionaldefault:90
Motion stiffness.
supportsvgcanvasapi
numberoptionaldefault:15
Motion damping.
supportsvgcanvasapi