Docs › Chart types

Heatmap

A grid of two categories, such as weekday × hour, shaded in one hue.

type: 'heatmap' draws one row per series and one column per label. Larger values get a darker shade of one hue (a sequential ramp) and a color key (min to max) sits under the grid. Cells keep a 2px gap. With 12 columns or fewer, cells that are big enough show their value.

Live example

Code for this example

createChart('#chart', {
  type: 'heatmap',
  title: 'Orders by weekday and hour',
  data: {
    labels: ['9am', '10am', '11am', '12pm', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm'],
    series: [
      { name: 'Mon', data: [12, 18, 25, 41, 38, 30, 27, 24, 20, 15] },
      { name: 'Tue', data: [10, 16, 22, 39, 36, 29, 25, 23, 19, 14] },
      { name: 'Wed', data: [11, 17, 24, 40, 37, 31, 26, 22, 21, 16] },
      { name: 'Thu', data: [13, 19, 26, 43, 40, 33, 28, 25, 22, 17] },
      { name: 'Fri', data: [15, 21, 29, 47, 44, 36, 33, 31, 30, 28] },
      { name: 'Sat', data: [22, 31, 42, 55, 58, 52, 48, 45, 41, 37] },
      { name: 'Sun', data: [25, 34, 45, 57, 60, 54, 49, 44, 38, 30] },
    ],
  },
});

In the light theme the ramp runs light → dark; in the dark theme from near the background to bright, so a larger value always means more contrast.
null leaves an empty cell (the grid color); its tooltip shows –.
Keyboard: left and right move along a row, up and down move to the next row.
The data table and the CSV have one row per series, as drawn.

Option	Default	What it does
`heatmap.min` / `max`	the data (from 0 when all positive)	Ends of the color ramp
`heatmap.color`	first series color	The ramp hue
`heatmap.legend`	true	Color key under the grid
`heatmap.labels`	true up to 12 columns	Values inside the cells