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).
Chart data.
'id'Key to use to index the data.
'value']Keys to use to determine each serie.
'stacked'How to group bars.
'vertical'How to display bars.
value scale configuration.
index scale configuration.
falseReverse bars, starts on top instead of bottom for vertical layout and right instead of left for horizontal one.
'auto'Minimum value.
'auto'Maximum value.
Optional formatter for values.
0.1Padding between each bar (ratio).
0Padding between grouped/stacked bars.
Chart width.
Chart height.
'Depends on device'Adjust pixel ratio, useful for HiDPI screens.
Chart margin.