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 series. 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.
Chart data.
X scale configuration.
Optional formatter for x values.
Y scale configuration.
Optional formatter for y values.
Chart width.
Chart height.
'Depends on device'Adjust pixel ratio, useful for HiDPI screens.
Chart margin.
'linear'Curve interpolation.
Define style for common elements such as labels, axes…
Define chart's colors.
2Line width.
falseEnable/disable area below each line.
0Define the value to be used for area baseline.
0.2Area opacity (0~1), depends on enableArea.
'normal'Define CSS mix-blend-mode for areas.
Define patterns and gradients.
Define rules to apply patterns and gradients
'grid', 'markers', 'axes', 'areas', 'crosshair', 'lines', 'points', 'slices', 'mesh', 'legends']Defines the order of layers and add custom layers.
trueEnable/disable points.
Overrides default point circle. The function will receive size, color, borderWidth and borderColor props and must return a valid SVG element.
6Size of the points.
Method to compute points color.
0Width of the points border.
Method to compute points border color.
falseEnable/disable points label.
Property to use to determine point label. If a function is provided, it will receive current point data and should return the desired label.
-12Label Y offset from point shape.
trueEnable/disable x grid.
Specify values to use for vertical grid lines.
trueEnable/disable y grid.
Specify values to use for horizontal grid lines.
Top axis configuration.
Right axis configuration.
Bottom axis configuration.
Left axis configuration.
trueEnable/disable interactivity. Using enableSlices will enable a crosshair on the x or y axis, that will move between the nearest slice to the mouse/touch point, and will show a tooltip of all data points for that slice. Using useMesh will use a voronoi mesh to detect the closest point to the mouse cursor/touch point, which is useful for very dense datasets, as it can become difficult to hover a specific point, however, it will only return one data point.
falseUse a voronoi mesh to detect mouse interactions, enableSlices must be disabled
falseDisplay mesh used to detect mouse interactions (voronoi cells).
onMouseEnter handler, doesn't work with slice tooltip.
onMouseMove handler, doesn't work with slice tooltip.
onMouseLeave handler, doesn't work with slice tooltip.
onClick handler, doesn't work with slice tooltip.
onTouchStart handler, when a touch gesture is started inside the graph.
onTouchMove handler, when a touch gesture that originated from inside the graph is moved. Note, when using slices, this will return the originally touched slice, not the slice currently being hovered over (use document.elementFromPoint()).
onTouchEnd handler, when a touch gesture that originated from inside the graph ends.
Custom point tooltip
Enable/disable slices tooltip for x or y axis, automatically disable mesh.
falseDisplay area used to detect mouse interactions for slices.
Custom slice tooltip
trueEnable/disable crosshair.
falseEnables the crosshair to be dragged around a touch screen.
Hides certain series by default given their ids
'bottom-left'Crosshair type, forced to slices axis if enabled.
Optional chart's legends.
Defines legend anchor relative to chart's viewport.
Legend direction, must be one of 'column', 'row'.
Justify symbol and label.
Legend block x translation.
Legend block y translation.
Legend item width.
Legend item height.
Spacing between each item.
Item symbol size.
Item layout direction.
trueEnable/disable transitions.
'gentle'Motion config for react-spring, either a preset or a custom configuration.