The HeatMap
component is available in the nivo
HTTP rendering API.
The API generates a SVG and return a path to this SVG
which can then be easily embedded.
The api accepts almost the same properties as the regular component, in json, however it's not interactive and you cannot use code in properties (functions).
Please note that the demo API server is installed on heroku using a free plan, so it might be unavailable from times to times.
no response available
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.