Line

@nivo/line

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.

Actions Logs
Start interacting with the chart to log actions
Base
object[]required

Chart data.

objectoptional

X scale configuration.

Function | stringoptional
open editor

Optional formatter for x values.

objectoptional

Y scale configuration.

Function | stringoptional
open editor

Optional formatter for y values.

numberrequired

Chart width.

numberrequired

Chart height.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvasapi
objectoptional
px
px
px
px

Chart margin.

Style
Customization
Points
Grid & Axes
Interactivity
Legends
Motion
Accessibility