Docs › Chart types

Calendar heatmap

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

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.

Live example

Code for this example

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