Line HTTP API

POST /charts/line
svgcanvashttp api

The Linecomponent is available in the nivo HTTP rendering API. The API generates a SVG and return a path to this SVG which can then be easily embedded.

The api accepts almost the same properties as the regular component, in json, however it's not interactive and you cannot use code in properties (functions).

Please note that the demo API server is installed on heroku using a free plan, so it might be unavailable from times to times.

Click the generate button in order to generate the chart.
You can customize settings by using dedicated controls.
generate
Response n/a
no response available
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
px

Chart width.

numberrequired
px

Chart height.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvasapi
objectoptional
px
px
px
px

Chart margin.

Style
stringoptionaldefault:'linear'
linear

Curve interpolation.

Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Categorical: Nivo

Define chart's colors.

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.

CssMixBlendModeoptionaldefault:'normal'

Define CSS mix-blend-mode for areas.

supportsvgcanvasapi
object[]optional

Define patterns and gradients.

supportsvgcanvasapi
object[]optional

Define rules to apply patterns and gradients

supportsvgcanvasapi
Customization
(string | Component)[]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
yFormatted

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.

(number | string)[]optional

Specify values to use for vertical grid lines.

booleanoptionaldefault:true
   

Enable/disable y grid.

(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. 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.

supportsvgcanvasapi
booleanoptionaldefault:false

Use a voronoi mesh to detect mouse interactions, enableSlices must 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
(point, event) => voidoptional

onTouchStart handler, when a touch gesture is started inside the graph.

supportsvgcanvasapi
(point, event) => voidoptional

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()).

supportsvgcanvasapi
(point, event) => voidoptional

onTouchEnd handler, when a touch gesture that originated from inside the graph ends.

supportsvgcanvasapi
Functionoptional

Custom point tooltip

supportsvgcanvasapi
'x' | 'y' | falseoptional

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
booleanoptionaldefault:false

Enables the crosshair to be dragged around a touch screen.

supportsvgcanvasapi
stringoptionaldefault:'bottom-left'

Crosshair type, forced to slices axis if enabled.

supportsvgcanvasapi
Legends
object[]optional

Optional chart's legends.

supportsvgcanvasapi
Motion
booleanoptionaldefault:true

Enable/disable transitions.

supportsvgcanvasapi
string | objectoptionaldefault:'gentle'

Motion config for react-spring, either a preset or a custom configuration.

supportsvgcanvasapi