HeatMap

@nivo/heatmap
svgcanvashttp api

An heat map matrix, you can chose between various colors scales, you also have the ability to change the cell shape for rectangle or circle and even use a custom component.

The responsive alternative of this component is ResponsiveHeatMap.

This component is available in the @nivo/api, see sample or try it using the API client. You can also see more example usages in the storybook.

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 diverging color scale maps colors from min to max value, with a diverging point which can be configured via divergeAt. It is intended to be used with a diverging color scheme, but also supports others.

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:0.5

Define the divergence point between min & max values (0~1).

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
inherited property
color
modifiers
darker
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
bottom
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'
rect

Cell component, the API does not support CellComponent.

supportsvgcanvasapi
'rect' | 'circle' | CellCanvasRendereroptionaldefault:'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 Cell ComponentCustom Tooltip