HeatMap

@nivo/heatmapsvgisomorphic
svgcanvashttp api

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

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
object[]required
Chart data.
string | Functionoptionaldefault:'id'
Key to use to index the data.
string[]optional
Keys to use to determine each serie.
number | 'auto'optionaldefault:'auto'
auto
Minimum value.
number | 'auto'optionaldefault:'auto'
auto
Maximum value.
booleanoptionaldefault:false
   Force square cells (width = height).
numberoptionaldefault:0
Cell size variation.
numberoptionaldefault:0
px
Padding.
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
optional
Define style for common elements such as labels, axes…
string | Functionoptionaldefault:'rect'
rect
Cell shape/component.
string | Function | string[]optionaldefault:'nivo'
Select...
Defines color range.
numberoptionaldefault:0.85
Cell opacity (0~1).
numberoptionaldefault:0
px
Cell border width.
string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
darker
Method to compute cell border color.
Labels
booleanoptionaldefault:true
   Enable/disable labels.
string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",1.4]]}
inheritthemecustom
inherited property
color
modifiers
darker
Method to compute label text color.
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.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
supportsvgcanvasapi
(cell, event) => voidoptional
onClick handler.
supportsvgcanvasapi
stringoptionaldefault:'rowColumn'
cell
Defines hover behavior.
supportsvgcanvasapi
numberoptionaldefault:1
Cell opacity on hover.
supportsvgcanvasapi
numberoptionaldefault:0.35
Cell opacity when not hovered.
supportsvgcanvasapi
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
supportsvgcanvasapi
string | objectoptional
wobbly
Motion config for react-spring, either a preset or a custom configuration.
supportsvgcanvasapi
Recipes
Custom cell componentCustom tooltip