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.
2
Line width.
false
Enable/disable area below each line.
0
Define the value to be used for area baseline.
0.2
Area 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.
true
Enable/disable points.
Overrides default point circle. The function will receive size
, color
, borderWidth
and borderColor
props and must return a valid SVG element.
6
Size of the points.
Method to compute points color.
0
Width of the points border.
Method to compute points border color.
false
Enable/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.
-12
Label Y offset from point shape.
true
Enable/disable x grid.
Specify values to use for vertical grid lines.
true
Enable/disable y grid.
Specify values to use for horizontal grid lines.
Top axis configuration.
Right axis configuration.
Bottom axis configuration.
Left axis configuration.
true
Enable/disable interactivity.
false
Use a voronoi mesh to detect mouse interactions, enableSlices must be disabled
false
Display 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.
Custom point tooltip
Tooltip position when hovering
Enable/disable slices tooltip for x or y axis, automatically disable mesh.
false
Display area used to detect mouse interactions for slices.
Custom slice tooltip
true
Enable/disable crosshair.
'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.
true
Enable/disable transitions.
'gentle'
Motion config for react-spring, either a preset or a custom configuration.