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,
    gradientLegend: { ... },
      enabled: boolean,
      width: number | string,
      height: number | string,
      thickness: number,
      align: 'start' | 'center' | 'end',
      stops: number,
      showLabels: boolean,
      showHoverValue: boolean,
      labelStyle: { ... },
        fontSize: string,
        fontFamily: string,
        colors: string,
      arrow: { ... },
        size: number,
        color: string,
      formatter: Function,
}

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.

gradientLegend

heatmap.colorScale.gradientLegend

Replace the default categorical heatmap legend with a continuous color gradient strip and a hover indicator arrow that tracks the currently hovered cell's value along the spectrum. Follows legend.position (top / right / bottom / left); the arrow flips to point at the strip from the chart-facing side.

When colorScale.ranges is configured, the strip renders the configured colors as hard bands and hovering a band highlights the cells in that range. Otherwise the stops are sampled from the same shade function the cells use, producing a smooth gradient that matches the shaded cells.

enabled

heatmap.colorScale.gradientLegend.enabled
Default: false

Turn the gradient legend on.

Available Options:

  • false (default)
  • true

width

heatmap.colorScale.gradientLegend.width
Default: '70%'

Strip length for horizontal placements (top / bottom). Accepts a number (pixels) or a percentage string resolved against the chart's SVG width.

height

heatmap.colorScale.gradientLegend.height
Default: '70%'

Strip length for vertical placements (left / right). Accepts a number (pixels) or a percentage string resolved against the chart's SVG height.

thickness

heatmap.colorScale.gradientLegend.thickness
Default: 12

Strip thickness (short axis) in pixels.

align

heatmap.colorScale.gradientLegend.align
Default: 'center'

Alignment of the strip within the legend area.

Available Options:

  • For top / bottom placement: 'start' = left, 'center' (default), 'end' = right
  • For left / right placement: 'start' = top, 'center' (default), 'end' = bottom

stops

heatmap.colorScale.gradientLegend.stops
Default: 16

Number of color stops sampled from the shade function when no explicit colorScale.ranges are provided.

showLabels

heatmap.colorScale.gradientLegend.showLabels
Default: true

Show min/max labels at the ends of the strip.

Available Options:

  • true (default)
  • false

showHoverValue

heatmap.colorScale.gradientLegend.showHoverValue
Default: true

Show a value tooltip next to the arrow when hovering a cell.

Available Options:

  • true (default)
  • false

labelStyle

heatmap.colorScale.gradientLegend.labelStyle

fontSize

heatmap.colorScale.gradientLegend.labelStyle.fontSize
Default: '11px'

Font size for the min/max strip labels.

fontFamily

heatmap.colorScale.gradientLegend.labelStyle.fontFamily
Default: undefined

Font family for the min/max strip labels. Defaults to chart.fontFamily.

colors

heatmap.colorScale.gradientLegend.labelStyle.colors
Default: undefined

Text color for the min/max strip labels. Defaults to chart.foreColor.

arrow

heatmap.colorScale.gradientLegend.arrow

size

heatmap.colorScale.gradientLegend.arrow.size
Default: 8

Arrow tip size in pixels.

color

heatmap.colorScale.gradientLegend.arrow.color
Default: undefined

Arrow fill color. Defaults to chart.foreColor.

formatter

heatmap.colorScale.gradientLegend.formatter
Default: undefined

Formatter applied to the min/max labels and the hover value tooltip. Receives the numeric value and returns the display string.

formatter: function (value) {
  return value.toFixed(1) + '°C'
}