HeatMap HTTP API

POST /charts/heatmap
svgcanvashttp api

The HeatMapcomponent 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.

Click the generate button in order to generate the chart.
You can customize settings by using dedicated controls.
generate
Response n/a
no response available
Base
HeatMapSerie<Datum, ExtraProps>[]required

Chart data.

string | (value: number) => string | numberoptional
open editor

Optional formatter for values.

numberrequired
px

Chart width.

numberrequired
px

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
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'

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'

Motion config for react-spring, either a preset or a custom configuration.

supportsvgcanvasapi