# 히트맵

> 요일×시간처럼 두 범주의 격자를 한 색의 진하기로.

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

`type: 'heatmap'` 는 시리즈 하나가 한 줄(행), `labels` 가 열입니다. 값이 클수록 진한 한 가지 색(순차 색)으로 칠하고, 아래에 색 범례(최소~최대)를 붙입니다. 칸 사이는 2px 띄웁니다. 열이 12개 이하이고 칸이 충분히 크면 칸 안에 값을 적습니다.

```js
createChart('#chart', {
  type: 'heatmap',
  title: '요일·시간대별 주문',
  unit: '건',
  data: {
    labels: ['9시', '10시', '11시', '12시', '13시', '14시', '15시', '16시', '17시', '18시'],
    series: [
      { name: '월', data: [12, 18, 25, 41, 38, 30, 27, 24, 20, 15] },
      { name: '화', data: [10, 16, 22, 39, 36, 29, 25, 23, 19, 14] },
      { name: '수', data: [11, 17, 24, 40, 37, 31, 26, 22, 21, 16] },
      { name: '목', data: [13, 19, 26, 43, 40, 33, 28, 25, 22, 17] },
      { name: '금', data: [15, 21, 29, 47, 44, 36, 33, 31, 30, 28] },
      { name: '토', data: [22, 31, 42, 55, 58, 52, 48, 45, 41, 37] },
      { name: '일', data: [25, 34, 45, 57, 60, 54, 49, 44, 38, 30] },
    ],
  },
});
```

- 밝은 테마에서는 옅은 색 → 진한 색, 어두운 테마에서는 배경에 가까운 색 → 밝은 색입니다. 값의 크기가 늘 배경과의 대비로 읽힙니다.
- `null` 은 빈 칸(격자 색)으로 남깁니다. 툴팁에는 `–`.
- 키보드: 좌·우 화살표는 한 줄 안에서, 위·아래 화살표는 다음 줄로 옮깁니다.
- 데이터 표와 CSV 도 화면과 같이 한 줄에 한 시리즈입니다.

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `heatmap.min` / `max` | 데이터 범위(모두 양수면 0부터) | 색 범위의 양 끝 |
| `heatmap.color` | 첫 시리즈 색 | 색의 기준 |
| `heatmap.legend` | true | 아래 색 범례 |
| `heatmap.labels` | 열 12개 이하면 true | 칸 안의 값 |