Bar

@nivo/barsvgisomorphic

Bar chart which can display multiple data series, stacked or side by side. Also supports both vertical and horizontal layout, with negative values descending below the x axis (or y axis if using horizontal layout).

The bar item component can be customized to render any valid SVG element, it will receive current bar style, data and event handlers, the storybook offers an example.

The responsive alternative of this component is ResponsiveBar.

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. However it requires an extra property for each legend configuration you pass to legends property: dataFrom, it defines how to compute legend's data and accept indexes or keys. indexes is suitable for simple bar chart with a single data serie while keys may be used if you have several ones (groups).

Actions Logs
Start interacting with the chart to log actions
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.
Array<string | Function>optionaldefault:['grid', 'axes', 'bars', 'markers', 'legends', 'annotations']
Defines the order of layers.
stringoptionaldefault:'stacked'
How to group bars.
stringoptionaldefault:'vertical'
How to display bars.
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.
objectoptional
px
px
px
px
Chart margin.
numberoptionaldefault:0.1
Padding between each bar (ratio).
numberoptionaldefault:0
px
Padding between grouped/stacked bars.
Style
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.
numberoptionaldefault:0
px
Width of bar border.
string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
darker
Method to compute border color.
Labels
booleanoptionaldefault:true
   Enable/disable labels.
string | Functionoptionaldefault:'value'
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:'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.
Functionoptional
Tooltip custom component
booleanoptional
   Showcase custom tooltip component.
Legends
object[]optional
Optional chart's legends.
add legend
legend[0]: bottom-right, columnremove
stringoptional
bottom-right
Defines legend anchor relative to chart's viewport.
'column' | 'row'optional
Legend direction, must be one of 'column', 'row'.
booleanoptional
   Justify symbol and label.
numberoptional
px
Legend block x translation.
numberoptional
px
Legend block y translation.
numberrequired
px
Legend item width.
numberrequired
px
Legend item height.
numberoptional
px
Spacing between each item.
numberoptional
px
Item symbol size.
stringoptional
left-to-right
Item layout direction.
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
numberoptionaldefault:90
Motion stiffness.
numberoptionaldefault:13
Motion damping.