Bar HTTP API

POST /charts/bar
svgcanvashttp api

The Barcomponent 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.

string | (datum: RawDatum): string | numberoptionaldefault:'id'

Key to use to index the data.

string[]optionaldefault:['value']

Keys to use to determine each serie.

'grouped' | 'stacked'optionaldefault:'stacked'

How to group bars.

'horizontal' | 'vertical'optionaldefault:'vertical'

How to display bars.

objectoptionaldefault:{"type":"linear"}

value scale configuration.

objectoptionaldefault:{"type":"band","round":true}

index scale configuration.

booleanoptionaldefault:false
   

Reverse bars, starts on top instead of bottom for vertical layout and right instead of left for horizontal one.

number | 'auto'optionaldefault:'auto'
auto

Minimum value.

number | 'auto'optionaldefault:'auto'
auto

Maximum value.

string | (value: number) => string | numberoptional
open editor

Optional formatter for values.

numberoptionaldefault:0.1

Padding between each bar (ratio).

numberoptionaldefault:0
px

Padding between grouped/stacked bars.

numberrequired
px

Chart width for non-responsive component.

numberoptional

Chart default width for responsive component.

numberrequired
px

Chart height for non-responsive component.

numberoptional

Chart default height for responsive component.

number (ms)optional

Debounce width/height updates for responsive component.

(dimensions: { width: number; height: number }) => voidoptional

A callback for when responsive component is resized.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvasapi
objectoptional
px
px
px
px

Chart margin.

Ref<SVGSVGElement | HTMLCanvasElement>optional

Ref to the chart's container. Used on this page to generate/download the chart's image via html-to-image.

supportsvgcanvasapi
Style
Customization
Labels
Grid & Axes
Interactivity
Legends
Accessibility
Motion