Bar

@nivo/bar
svgcanvashttp api

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

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
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', '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.

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.

add legend
legend[0]: bottom-right, columnremove
stringoptional
bottom-right

Defines legend anchor relative to chart's viewport.

supportsvgcanvasapi
'column' | 'row'optional

Legend direction, must be one of 'column', 'row'.

supportsvgcanvasapi
booleanoptional
   

Justify symbol and label.

supportsvgcanvasapi
numberoptional
px

Legend block x translation.

supportsvgcanvasapi
numberoptional
px

Legend block y translation.

supportsvgcanvasapi
numberrequired
px

Legend item width.

supportsvgcanvasapi
numberrequired
px

Legend item height.

supportsvgcanvasapi
numberoptional
px

Spacing between each item.

supportsvgcanvasapi
numberoptional
px

Item symbol size.

supportsvgcanvasapi
stringoptional
left-to-right

Item layout direction.

supportsvgcanvasapi
Motion
booleanoptionaldefault:true
   

Enable/disable transitions.

supportsvgcanvasapi
string | objectoptionaldefault:'default'
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
Recipes
Using markersStacked diverging bar chartGrouped diverging bar chartCustom bar elementFormatting valuesUsing custom tooltipCustom axis ticksWith symlog scaleRace bar chartInitial hidden idsUsing custom label for legendsUsing annotations