# Heatmap

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

Source: https://82chart.com/en/docs/heatmap/

`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.

```js
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 |