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.

numberrequired
px

Chart height.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvasapi
objectoptional
px
px
px
px

Chart margin.

Style
Themeoptional

Define style for common elements such as labels, axes…

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

Define chart's colors.

'id' | 'indexValue'optionaldefault:'id'
id

Property used to determine node color.

numberoptionaldefault:0
px

Rectangle border radius.

numberoptionaldefault:0
px

Width of bar border.

string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
darker

Method to compute border color.

object[]optional

Define patterns and gradients.

supportsvgcanvasapi
object[]optional

Define rules to apply patterns and gradients

supportsvgcanvasapi
Customization
Array<string | Function>optionaldefault:['grid', 'axes', 'bars', 'totals', 'markers', 'legends', 'annotations']

Defines the order of layers.

supportsvgcanvasapi
Labels
booleanoptionaldefault:true
   

Enable/disable labels.

string | Functionoptionaldefault:'formattedValue'

Define how bar labels are computed.

numberoptionaldefault:0
px

Skip label if bar width is lower than provided value, ignored if 0.

numberoptionaldefault:0
px

Skip label if bar height is lower than provided value, ignored if 0.

string | object | Functionoptionaldefault:{"from":"theme","theme":"labels.text.fill"}
inheritthemecustom
inherited property
color
modifiers
darker

Defines how to compute label text color.

'start' | 'center' | 'end'optionaldefault:'center'

Defines the position of the label relative to its bar.

numberoptionaldefault:0
px

Defines the vertical or horizontal (depends on layout) offset of the label.

booleanoptionaldefault:false
   

Enable/disable totals labels.

numberoptionaldefault:10
px

Offset from the bar edge for the total label.

Grid & Axes
booleanoptionaldefault:false
   

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.

supportsvgcanvasapi
Functionoptional

Tooltip custom component

supportsvgcanvasapi
booleanoptional

Showcase custom tooltip component.

supportsvgcanvasapi
Functionoptional

onClick handler

supportsvgcanvasapi
Legends
object[]optional

Optional chart's legends.

supportsvgcanvasapi
Motion
booleanoptionaldefault:true

Enable/disable transitions.

supportsvgcanvasapi
string | objectoptionaldefault:'default'

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

supportsvgcanvasapi
Accessibility
booleanoptional

Make the root SVG element and each bar item focusable, for keyboard navigation.

supportsvgcanvasapi
stringoptional

Main element role attribute.

supportsvgcanvasapi
stringoptional

Main element aria-label.

supportsvgcanvasapi
stringoptional

Main element aria-labelledby.

supportsvgcanvasapi
stringoptional

Main element aria-describedby.

supportsvgcanvasapi
(data) => stringoptional

aria-label for bar items.

supportsvgcanvasapi
(data) => stringoptional

aria-labelledby for bar items.

supportsvgcanvasapi
(data) => stringoptional

aria-describedby for bar items.

supportsvgcanvasapi