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 | Functionoptionaldefault:'id'
Key to use to index the data.
string[]optionaldefault:['value']
Keys to use to determine each serie.
stringoptionaldefault:'stacked'
How to group bars.
stringoptionaldefault:'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 | stringoptionaldefault:'auto'
auto
Minimum value.
number | stringoptionaldefault:'auto'
auto
Maximum value.
numberoptionaldefault:0.1
Padding between each bar (ratio).
numberoptionaldefault:0
px
Padding between grouped/stacked bars.
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
optional
Define style for common elements such as labels, axes…
string | Function | string[]optionaldefault:{"scheme":"nivo"}
nivo
Defines color range.
string | Functionoptionaldefault:'id'
id
Property used to determine node color.
numberoptionaldefault:0
px
Rectangle border radius.
supportsvgcanvasapi
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', 'markers', 'legends', 'annotations']
Defines the order of layers.
supportsvgcanvasapi
Labels
booleanoptionaldefault:true
   Enable/disable labels.
string | Functionoptionaldefault:'value'
Define how bar labels are computed.
string | Functionoptional
How to format labels.
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:'theme'
inheritthemecustom
inherited property
color
modifiers
darker
Defines how to compute label text color.
Grid & Axes
booleanoptionaldefault:false
   Enable/disable x grid.
Array<number | string>optional
Specify values to use for vertical grid lines.
booleanoptionaldefault:true
   Enable/disable y grid.
Array<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
numberoptionaldefault:90
Motion stiffness.
supportsvgcanvasapi
numberoptionaldefault:15
Motion damping.
supportsvgcanvasapi