HeatMap

@nivo/heatmap

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.

roll the dice
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 for non-responsive component.

numberrequired

Chart height for non-responsive component.

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
Labels
Grid & Axes
Legends
Customization
Interactivity
Annotations
Accessibility
Motion