HeatMapCanvas

@nivo/heatmapcanvas
svgcanvashttp api

A variation around the HeatMap 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 ResponsiveHeatMapCanvas.

1014 nodes
Actions Logs
Start interacting with the chart to log actions
Base
HeatMapSerie<Datum, ExtraProps>[]required

Chart data.

string | (value: number) => string | numberoptional
open editor

Optional formatter for values.

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.

booleanoptionaldefault:false
   

Force square cells (width = height), please note that padding is ignored.

numberoptionaldefault:0
numberoptionaldefault:0
numberoptionaldefault:0
numberoptionaldefault:0
false | SizeVariationConfigoptionaldefault:false

Optionally make the size of the cells vary depending on their value.

Style
Themeoptional

Define style for common elements such as labels, axes…

ContinuousColorScaleConfig | ((datum) => string)optionaldefault:{"type":"sequential","scheme":"brown_blueGreen"}
'sequential' | 'diverging' | 'quantize'required

The quantize color scale maps colors from min to max value to a discrete color range, dividing the domain into uniform segments. You can either use a predefined color scheme or pass a custom array of colors.

stringoptional
Diverging: Red → Yellow → Blue
numberoptional

If omitted, will use the min value from the data.

numberoptional

If omitted, will use the max value from the data.

numberoptionaldefault:7

Customize the number of steps you want to use for a quantize scale unless you specify a custom array of colors, in which case the number of steps is equal to the number of colors you defined.

stringoptionaldefault:'#000000'
   #555555

Color to use for cells not having a value.

numberoptionaldefault:1
numberoptionaldefault:1
supportsvgcanvasapi
numberoptionaldefault:0.15
supportsvgcanvasapi
numberoptionaldefault:0

Cell border radius, when using rect.

supportsvgcanvasapi
numberoptionaldefault:0
px
InheritedColorConfig<ComputedCell>optionaldefault:{"from":"color","modifiers":[["darker",0.8]]}
inheritthemecustom
#000000
Labels
booleanoptionaldefault:true
   

Enable/disable labels.

PropertyAccessoroptionaldefault:'formattedValue'

Define what to use as a label.

string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",2]]}
inheritthemecustom
inherited property
color
modifiers
darker
Grid & Axes
booleanoptionaldefault:false
   

Enable/disable x grid.

booleanoptionaldefault:false
   

Enable/disable y grid.

objectoptional

Top axis configuration.

objectoptional

Right axis configuration.

objectoptional

Bottom axis configuration.

objectoptional

Left axis configuration.

Legends
ContinuousColorsLegendProps[]optional

Please note that legends are ignored when using a custom function for colors.

add
legends[0]remove
LegendAnchoroptional
left
numberoptional
numberoptional
numberoptional
numberoptional
'row' | 'column'optional
'before' | 'after'optional
numberoptional
numberoptional
booleanoptional
   
string | (value: number) => string | numberoptional
open editor
stringoptional
'start' | 'middle' | 'end'optional
numberoptional
Customization
('grid' | 'axes' | 'cells' | CustomLayer | CustomCanvasLayer)[]optionaldefault:['grid', 'axes', 'cells', 'legends', 'annotations']

Defines the order of layers and add custom layers, please use the appropriate variant for custom layers.

supportsvgcanvasapi
'rect' | 'circle' | CellComponentoptionaldefault:'rect'

Cell component, the API does not support CellComponent.

supportsvgcanvasapi
'rect' | 'circle' | CellCanvasRendereroptionaldefault:'rect'
rect

Cell renderer for canvas implementation.

supportsvgcanvasapi
Interactivity
booleanoptionaldefault:true
   

Enable/disable interactivity.

supportsvgcanvasapi
TooltipComponentoptional

Custom tooltip component.

supportsvgcanvasapi
(cell: ComputedCell, event: MouseEvent) => voidoptional
supportsvgcanvasapi
(cell: ComputedCell, event: MouseEvent) => voidoptional
supportsvgcanvasapi
(cell: ComputedCell, event: MouseEvent) => voidoptional
supportsvgcanvasapi
(cell: ComputedCell, event: MouseEvent) => voidoptional
supportsvgcanvasapi
stringoptionaldefault:'rowColumn'
rowColumn

Defines hover behavior.

supportsvgcanvasapi
Annotations
AnnotationMatcher[]optionaldefault:[]

Annotations for nodes.

add annotation
Accessibility
stringoptional

Main element role attribute.

stringoptional

Main element aria-label.

stringoptional

Main element aria-labelledby.

stringoptional

Main element aria-describedby.

Motion
booleanoptionaldefault:true
   

Enable/disable transitions.

supportsvgcanvasapi
string | objectoptionaldefault:'gentle'
gentle

Motion config for react-spring, either a preset or a custom configuration.

supportsvgcanvasapi
Recipes
Variable Cell SizeCustom Tooltip