달력 히트맵

type: 'calendar' 는 [날짜, 값] 짝(또는 날짜 labels + 숫자)을 받아 한 주를 한 열로, 요일을 줄(월~일)로 그립니다. 위에는 달 이름(4월, 5월…), 왼쪽에는 요일, 아래에는 색 범례가 붙습니다. 데이터가 없는 날도 범위 안이면 빈 칸으로 그립니다.

createChart('#chart', {
  type: 'calendar',
  title: '2026년 학습 기록',
  unit: '분',
  timeZone: 'Asia/Seoul',
  data: {
    series: [{
      name: '학습',
      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)]),
    }],
  },
});

• 날짜 문자열('2026-10-21')은 그 시간대의 그날입니다. Date 값은 timeZone 으로 날짜를 정하므로 UTC 서버에서 renderToSVG 해도 하루 밀리지 않습니다.
• 한 주는 월요일부터 시작합니다. 일요일부터 시작하려면 heatmap: { weekStart: 0 }.
• 키보드: 좌·우 화살표는 한 주씩, 위·아래 화살표는 하루씩 옮깁니다. 툴팁에는 2026.10.21(수) 처럼 날짜와 요일이 나옵니다.
• 색은 히트맵과 같은 순차 색입니다(heatmap.min, max, color, legend).