# Calendar heatmap

> Daily values on a week grid: study streaks, attendance, commits.

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

`type: 'calendar'` takes `[date, value]` pairs (or date `labels` with numbers) and draws one column per week and one row per weekday. Month names run along the top, weekday names on the left and a color key underneath. Days in the range without data are drawn as empty cells.

```js
createChart('#chart', {
  type: 'calendar',
  title: 'Study minutes, 2026',
  timeZone: 'Asia/Seoul',
  data: {
    series: [{
      name: 'Minutes',
      data: Array.from({ length: 150 }, (_, i) => [new Date(Date.UTC(2026, 4, 1 + i)).toISOString().slice(0, 10), i % 9 === 0 ? 0 : 15 + ((i * 53) % 70)]),
    }],
  },
});
```

- A date string (`'2026-10-21'`) is that day in the zone. `Date` values are placed by `timeZone`, so `renderToSVG` on a UTC server does not shift days.
- Weeks start on Monday; `heatmap: { weekStart: 0 }` starts them on Sunday.
- Keyboard: left and right move a week, up and down move a day. The tooltip names the date and weekday.
- Colors use the same sequential ramp as the heatmap (`heatmap.min`, `max`, `color`, `legend`).