HeatMap HTTP API

POST /charts/heatmap

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

Define style for common elements such as labels, axes…

string | Functionoptionaldefault:'rect'
circle

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'

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

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

supportsvgcanvasapi