BarCanvas

@nivo/barcanvas
svgcanvashttp api

A variation around the Bar component. Well suited for large data sets as it does not impact DOM tree depth, however you'll lose the isomorphic ability and transitions. The responsive alternative of this component is ResponsiveBarCanvas.

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
Recipes
Using custom layerUsing custom bar rendererUsing annotations