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
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Diverging: Red → Blue

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

'start' | 'center' | 'end'optionaldefault:'center'

Defines the position of the label relative to its bar.

numberoptionaldefault:0
px

Defines the vertical or horizontal (depends on layout) offset of the label.

booleanoptionaldefault:false
   

Enable/disable totals labels.

numberoptionaldefault:10
px

Offset from the bar edge for the total label.

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
Motion
booleanoptionaldefault:true

Enable/disable transitions.

supportsvgcanvasapi
string | objectoptionaldefault:'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 custom layerUsing custom bar rendererUsing annotations