Bar

@nivo/bar

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
Customization
Labels
Grid & Axes
Interactivity
Legends
Motion
Accessibility