heatmap

Configuration Structure

heatmap: {
radius: number,
enableShades: boolean,
shadeIntensity: number,
reverseNegativeShade: boolean,
distributed: boolean,
useFillColorAsStroke: boolean,
colorScale: { ... },
ranges: Array,
from: number,
to: number,
color: string,
foreColor: string,
name: string,
inverse: boolean,
min: number,
max: number,
}

plotOptions

radius

Default: 2

Radius of the rectangle inside heatmap

enableShades

Default: true

Enable different shades of color depending on the value

shadeIntensity

Default: 0.5

The intensity of the shades generated for each value
Accepts from 0 to 1

reverseNegativeShade

Default: true

When enabled, it will reverse the shades for negatives but keep the positive shades as it is now. An example of such use-case would be in a profit/loss chart where darker reds mean larger losses, darker greens mean larger gains.

distributed

Default: false

When turned on, each row in a heatmap will have it's own lowest and highest range and colors will be shaded for each series. Default value is turned off.

useFillColorAsStroke

Default: false

If turned on, the stroke/border around the heatmap cell has the same color as the cell color.

colorScale

ranges

heatmap.colorScale.ranges

from

heatmap.colorScale.ranges.from

Value indicating range's upper limit

to

heatmap.colorScale.ranges.to

Value indicating range's lower limit

color

heatmap.colorScale.ranges.color

Background color to fill the range with.

foreColor

heatmap.colorScale.ranges.foreColor

Fore Color of the text if data-labels is enabled.

name

heatmap.colorScale.ranges.name

If a name is provided, it will be used in the legend. If it is not provided, the text falls back to {from} - {to}

inverse

heatmap.colorScale.inverse

In a multiple series heatmap, flip the color-scale to fill the heatmaps vertically instead of horizontally.

min

heatmap.colorScale.min

Specify the lower range for heatmap color calculation.

max

heatmap.colorScale.max

Specify the higher range for heatmap color calculation.