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.
Chart data.
Optional formatter for values.
Chart width.
Chart height.
'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
Chart margin.
false
Force square cells (width = height), please note that padding is ignored.
0
0
0
0
false
Optionally make the size of the cells vary depending on their value.
Define style for common elements such as labels, axes…
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.
If omitted, will use the min value from the data.
If omitted, will use the max value from the data.
0.5
Define the divergence point between min & max values (0~1).
'#000000'
#555555
Color to use for cells not having a value.
1
1
0.15
0
Cell border radius, when using rect
.
0
true
Enable/disable labels.
'formattedValue'
Define what to use as a label.
false
Enable/disable x grid.
false
Enable/disable y grid.
Top axis configuration.
Right axis configuration.
Bottom axis configuration.
Left axis configuration.
Please note that legends are ignored when using a custom function for colors
.
'grid'
, 'axes'
, 'cells'
, 'legends'
, 'annotations'
]Defines the order of layers and add custom layers, please use the appropriate variant for custom layers.
'rect'
Cell component, the API does not support CellComponent
.
'rect'
Cell renderer for canvas implementation.
true
Enable/disable interactivity.
Custom tooltip component.
'rowColumn'
Defines hover behavior.
Annotations for nodes.
Main element role attribute.
Main element aria-label.
Main element aria-labelledby.
Main element aria-describedby.
true
Enable/disable transitions.
'gentle'
Motion config for react-spring, either a preset or a custom configuration.