Calendar Heatmap.

PRO

날짜별 활동을 달력 위의 색으로 표시합니다.

<sy-calendar-heatmap>설치와 연결 API reference

LIVE EXAMPLE

일별 활동

페이지 테마에 맞춰 표시

차트를 조작하면 선택·범위 변경 결과가 여기에 표시됩니다.

옵션변경 사항이 미리보기와 코드에 반영됩니다.

표현과 스타일7

주 시작일날짜별 집계셀 간격셀 모서리요일 레이블

월 이름월 경계선

범례와 상호작용11

애니메이션 시간 (ms)애니메이션 속도 곡선애니메이션 적용 시점툴팁 방식툴팁 여는 동작툴팁 동시 표시드래그 확대

툴팁 표시애니메이션툴팁 드래그툴팁 연결선

제목과 크기3

차트 제목차트 부제목차트 높이 (px)

달력의 날짜를 기준으로 측정값을 배치합니다. 모든 값은 예시 데이터입니다.

코드 보기

현재 미리보기

<div id="chart-container" style="width: 100%; min-width: 0;"></div>

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced-pro/components/sy-calendar-heatmap.js';
  define0();

  // Pro: 앱 시작 시 발급받은 인증서로 registerLicense를 완료하세요.
  // 홈페이지 미리보기의 인증서는 고객 앱에서 사용하지 않습니다.
  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-calendar-heatmap",
      "props": {
        "data": [
          {
            "date": "2026-01-01",
            "value": 0
          },
          {
            "date": "2026-01-02",
            "value": 13
          },
          {
            "date": "2026-01-03",
            "value": 26
          },
          {
            "date": "2026-01-04",
            "value": 39
          },
          {
            "date": "2026-01-05",
            "value": 52
          },
          {
            "date": "2026-01-06",
            "value": 65
          },
          {
            "date": "2026-01-07",
            "value": 78
          },
          {
            "date": "2026-01-08",
            "value": 91
          },
          {
            "date": "2026-01-09",
            "value": 4
          },
          {
            "date": "2026-01-10",
            "value": 17
          },
          {
            "date": "2026-01-11",
            "value": 30
          },
          {
            "date": "2026-01-12",
            "value": 43
          },
          {
            "date": "2026-01-13",
            "value": 56
          },
          {
            "date": "2026-01-14",
            "value": 69
          },
          {
            "date": "2026-01-15",
            "value": 82
          },
          {
            "date": "2026-01-16",
            "value": 95
          },
          {
            "date": "2026-01-17",
            "value": 8
          },
          {
            "date": "2026-01-18",
            "value": 21
          },
          {
            "date": "2026-01-19",
            "value": 34
          },
          {
            "date": "2026-01-20",
            "value": 47
          },
          {
            "date": "2026-01-21",
            "value": 60
          },
          {
            "date": "2026-01-22",
            "value": 73
          },
          {
            "date": "2026-01-23",
            "value": 86
          },
          {
            "date": "2026-01-24",
            "value": 99
          },
          {
            "date": "2026-01-25",
            "value": 12
          },
          {
            "date": "2026-01-26",
            "value": 25
          },
          {
            "date": "2026-01-27",
            "value": 38
          },
          {
            "date": "2026-01-28",
            "value": 51
          },
          {
            "date": "2026-01-29",
            "value": 64
          },
          {
            "date": "2026-01-30",
            "value": 77
          },
          {
            "date": "2026-01-31",
            "value": 90
          },
          {
            "date": "2026-02-01",
            "value": 3
          },
          {
            "date": "2026-02-02",
            "value": 16
          },
          {
            "date": "2026-02-03",
            "value": 29
          },
          {
            "date": "2026-02-04",
            "value": 42
          },
          {
            "date": "2026-02-05",
            "value": 55
          },
          {
            "date": "2026-02-06",
            "value": 68
          },
          {
            "date": "2026-02-07",
            "value": 81
          },
          {
            "date": "2026-02-08",
            "value": 94
          },
          {
            "date": "2026-02-09",
            "value": 7
          },
          {
            "date": "2026-02-10",
            "value": 20
          },
          {
            "date": "2026-02-11",
            "value": 33
          },
          {
            "date": "2026-02-12",
            "value": 46
          },
          {
            "date": "2026-02-13",
            "value": 59
          },
          {
            "date": "2026-02-14",
            "value": 72
          },
          {
            "date": "2026-02-15",
            "value": 85
          },
          {
            "date": "2026-02-16",
            "value": 98
          },
          {
            "date": "2026-02-17",
            "value": 11
          },
          {
            "date": "2026-02-18",
            "value": 24
          },
          {
            "date": "2026-02-19",
            "value": 37
          },
          {
            "date": "2026-02-20",
            "value": 50
          },
          {
            "date": "2026-02-21",
            "value": 63
          },
          {
            "date": "2026-02-22",
            "value": 76
          },
          {
            "date": "2026-02-23",
            "value": 89
          },
          {
            "date": "2026-02-24",
            "value": 2
          },
          {
            "date": "2026-02-25",
            "value": 15
          },
          {
            "date": "2026-02-26",
            "value": 28
          },
          {
            "date": "2026-02-27",
            "value": 41
          },
          {
            "date": "2026-02-28",
            "value": 54
          },
          {
            "date": "2026-03-01",
            "value": 67
          },
          {
            "date": "2026-03-02",
            "value": 80
          },
          {
            "date": "2026-03-03",
            "value": 93
          },
          {
            "date": "2026-03-04",
            "value": 6
          },
          {
            "date": "2026-03-05",
            "value": 19
          },
          {
            "date": "2026-03-06",
            "value": 32
          },
          {
            "date": "2026-03-07",
            "value": 45
          },
          {
            "date": "2026-03-08",
            "value": 58
          },
          {
            "date": "2026-03-09",
            "value": 71
          },
          {
            "date": "2026-03-10",
            "value": 84
          },
          {
            "date": "2026-03-11",
            "value": 97
          },
          {
            "date": "2026-03-12",
            "value": 10
          },
          {
            "date": "2026-03-13",
            "value": 23
          },
          {
            "date": "2026-03-14",
            "value": 36
          },
          {
            "date": "2026-03-15",
            "value": 49
          },
          {
            "date": "2026-03-16",
            "value": 62
          },
          {
            "date": "2026-03-17",
            "value": 75
          },
          {
            "date": "2026-03-18",
            "value": 88
          },
          {
            "date": "2026-03-19",
            "value": 1
          },
          {
            "date": "2026-03-20",
            "value": 14
          },
          {
            "date": "2026-03-21",
            "value": 27
          },
          {
            "date": "2026-03-22",
            "value": 40
          },
          {
            "date": "2026-03-23",
            "value": 53
          },
          {
            "date": "2026-03-24",
            "value": 66
          },
          {
            "date": "2026-03-25",
            "value": 79
          },
          {
            "date": "2026-03-26",
            "value": 92
          },
          {
            "date": "2026-03-27",
            "value": 5
          },
          {
            "date": "2026-03-28",
            "value": 18
          },
          {
            "date": "2026-03-29",
            "value": 31
          },
          {
            "date": "2026-03-30",
            "value": 44
          },
          {
            "date": "2026-03-31",
            "value": 57
          }
        ],
        "weekStart": "monday",
        "width": 640,
        "height": 360,
        "brandPosition": "bottom-right",
        "brandLogo": ""
      }
    }
  ];
  const container = document.querySelector('#chart-container');
  const elements = specs.map(({ tag, id, props }) => {
    const element = document.createElement(tag);
    element.id = id;
    Object.assign(element, props);
    element.setAttribute('aria-label', 'calendar-heatmap 예제 차트');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('pointClick', event.detail);
  };
  chart.addEventListener('pointClick', onEvent);
  const observer = new ResizeObserver(([entry]) => {
    const width = Math.max(160, Math.floor(entry.contentRect.width));
    elements.forEach(element => { element.width = width; });
  });
  observer.observe(container);

  // SPA에서는 화면이 해제될 때 이 함수를 호출하세요.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('pointClick', onEvent);
    container.replaceChildren();
  }
</script>

사용과 데이터

일일 사용량·성과·출석 등 주간 패턴을 확인하세요.

비어 있는 날짜와 실제 0을 구분하세요. 날짜 표기와 주 시작일을 일관되게 유지하세요.

데이터 계약

프로퍼티	입력 형식
`data`	{ date, value } 배열. 예제는 YYYY-MM-DD 날짜를 사용합니다.
`weekStart`	monday 또는 sunday입니다.

데이터를 갱신할 때

배열 안의 값을 직접 바꾸기보다 새 배열·객체를 프로퍼티에 할당하세요. 차트의 이벤트는 event.detail로 선택 결과를 전달합니다. 화면을 해제할 때 ResizeObserver와 앱에서 등록한 이벤트 리스너를 정리하세요.

기능별 예제

16개의 기능 예제를 직접 조작하고 코드를 확인하세요. ‘미리보기에서 편집’을 누르면 위 설정 패널에서 옵션을 더 조합할 수 있습니다.

월요일 시작PRO

주 시작일을 월요일로 맞추고 월 경계를 표시합니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

달력 레이블PRO

월·요일 이름과 넓은 셀 간격으로 읽기 쉽게 표시합니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

포인터와 값 확인PRO

데이터를 가리키면 해당 지점의 값을 확인할 수 있습니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

드래그 확대와 이동PRO

드래그로 확대하고 Shift를 누른 채 이동합니다. Ctrl + 휠로 확대하거나 축소할 수 있습니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

애니메이션 재생PRO

같은 예제를 다시 그려 초기 표시 애니메이션을 확인합니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

애니메이션PRO

애니메이션의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

데이터 입력PRO

데이터 입력의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

대용량 데이터PRO

대용량 데이터의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

크기PRO

크기의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

툴팁PRO

툴팁의 12가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

확대와 이동PRO

확대와 이동의 6가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

컨텍스트 메뉴PRO

컨텍스트 메뉴의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

데이터 컨텍스트 메뉴PRO

데이터 컨텍스트 메뉴의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

좌표와 데이터 조회PRO

좌표와 데이터 조회의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

OverviewPRO

Overview의 4가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

Streaming · 실시간 데이터 추가와 갱신PRO

실시간 데이터 추가와 갱신의 5가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

API 레퍼런스

sy-calendar-heatmap의 전체 공개 API입니다. 객체와 배열은 JavaScript 프로퍼티로 전달하세요. 이름을 선택하면 적용 코드와 타입 계약을 확인할 수 있습니다.

주요 속성

속성 / 프로퍼티	타입 / 기본값	설명
	`CalendarHeatmapData`기본값 undefined	{ date, value } 배열. 예제는 YYYY-MM-DD 날짜를 사용합니다.
	`number`기본값 900	차트의 너비(px). 컨테이너가 바뀌면 ResizeObserver로 갱신합니다.
	`number`기본값 180	차트의 높이(px).
brandLogo	`string`기본값 undefined	기본값은 Syidax 로고입니다. Pro의 chart.branding 권한으로 none 또는 PNG·JPEG·WebP data URL을 사용할 수 있습니다.
brandPosition	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`기본값 'bottom-right'	로고를 고정할 코너입니다. Community·Pro, 화면과 이미지 내보내기에 동일하게 적용됩니다.
weekStart	`CalendarWeekStart`기본값 'monday'	monday 또는 sunday입니다.
	`CalendarAggregate`기본값 'sum'	How several entries on one day fold: `sum` (default), `max`, `min`, `mean`, `last`.
cellGap	`number`기본값 2	CSS px between cells.
cellRadius	`number`기본값 2	The cell corner radius in CSS px.
monthLabels	`boolean`기본값 true	Month labels along the top (a month whose label would overlap the previous one is skipped).
weekdayLabels	`CalendarWeekdayLabels`기본값 'short'	Weekday labels down the left: `short` (rows 0 / 2 / 4), `all`, `none`.
monthLines	`boolean`기본값 true	Month boundaries as step lines between the cells.
chartTitle	`string`기본값 undefined	차트 내부 제목입니다. 데이터의 단위와 의미를 함께 설명하세요.
chartSubtitle	`string`기본값 undefined	차트 내부 부제목입니다.
	`CartesianTooltipInput`기본값 undefined	포인터에 따라 표시할 값, 위치, 내용의 툴팁 설정입니다.
tooltipEnabled	`boolean`기본값 true	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.
animated	`boolean`기본값 false	초기 표시와 데이터 변경의 애니메이션 사용 여부입니다.
animationDuration	`number`기본값 600	애니메이션 지속 시간(ms).
animationEasing	`CalendarHeatmapEasing`기본값 'ease-out'	허용값: linear, ease-out, ease-in, ease-in-out. 기본값: 'ease-out'.
animationType	`CalendarHeatmapAnimationType`기본값 undefined	허용값: initial, update. 기본값: undefined.
	`CartesianZoomInput`기본값 undefined	확대·축소와 표시 범위의 동작 설정입니다.

나머지 속성 20

속성 / 프로퍼티	타입 / 기본값	설명
	`number`기본값 undefined	The range: a year (Jan 1 … Dec 31); `start-date` / `end-date` win over it; neither → the data's span.
startDate	`string`기본값 undefined	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
endDate	`string`기본값 undefined	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
noDataValue	`number \| 'nan'`기본값 0	What a day without entries reads on the plane: a number (default 0 → the ramp's first colour) or `nan` (→ `empty-color`).
	`string \| ReadonlyArray<string> \| ReadonlyArray<readonly [number, string]>`기본값 undefined	The colour ramp (a scheme name, a colour list / comma list, or `[t, colour]` stops); default GitHub's greens.
valueMin	`number`기본값 undefined	Domain ends; an omitted end follows the data (the min includes the fill, so 0 is the ramp start).
valueMax	`number`기본값 undefined	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
emptyColor	`string`기본값 'transparent'	The colour of a NaN cell (the strip's corners outside the range, and no-data days under `no-data-value="nan"`) — transparent by default.
cellBorder	`number`기본값 0	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
cellBorderColor	`string`기본값 'rgba(17,24,39,0.35)'	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
renderPath	`CalendarHeatmapRenderPath`기본값 'auto'	The draw path: `auto` (the cells path from 3 device px per cell — the usual case), or a forced `plane` / `cells`.
	`HeatmapLodMode`기본값 'auto'	허용값: auto, point, area, smooth. 기본값: 'auto'.
enableMouseTracking	`boolean`기본값 true	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.
tooltipFormat	`(detail: CalendarHeatmapPointEventDetail) => string`기본값 undefined	JavaScript 프로퍼티로 전달합니다. 타입: (detail: CalendarHeatmapPointEventDetail) => string.
streamSource	`CalendarHeatmapStreamSource`기본값 undefined	실시간 데이터를 전달하는 스트림 소스입니다. 해당 타입의 계약을 확인하세요.
streamMax	`number`기본값 undefined	보관할 스트리밍 데이터의 최대 수입니다.
streamWindow	`number`기본값 undefined	화면에 유지할 스트리밍 데이터 구간입니다.
visualMap	`VisualMapBinding \| null`기본값 undefined	A visual-map binding; it overrides `colors` / `value-min` / `value-max` while bound.
	`CalendarHeatmapEngineMode`기본값 'auto'	auto·standard·pro 렌더러 선택입니다. 엔진 선택은 차트 종류의 Pro 사용 권한과 별개입니다.
	`CalendarHeatmapUnavailableBehaviour`기본값 'fallback'	허용값: fallback, error. 기본값: 'fallback'.

이벤트 13

이벤트	detail 타입	설명
	`CalendarHeatmapRenderResult & { tier: CalendarHeatmapEngineTier; engine?: ChartEngineStatus }`	차트 그리기가 완료되면 렌더링 결과를 detail로 전달합니다.
	`CalendarHeatmapPointEventDetail`	점 선택 이벤트입니다. CustomEvent.detail에서 선택한 데이터와 인덱스를 읽습니다.
	`CalendarHeatmapPointEventDetail \| null`	CustomEvent.detail 타입: CalendarHeatmapPointEventDetail \| null. 이벤트 이름은 대소문자를 구분합니다.
	`ChartPointContextMenuEventDetail<CalendarHeatmapPointEventDetail>`	CustomEvent.detail 타입: ChartPointContextMenuEventDetail<CalendarHeatmapPointEventDetail>. 이벤트 이름은 대소문자를 구분합니다.
	`{ count: number }`	CustomEvent.detail 타입: { count: number }. 이벤트 이름은 대소문자를 구분합니다.
	`{ dropped: number }`	CustomEvent.detail 타입: { dropped: number }. 이벤트 이름은 대소문자를 구분합니다.
	`void`	CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.
	`void`	CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.
	`void`	CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.
	`CartesianTooltipEventDetail`	내장 툴팁 표시 여부입니다.
	`void`	CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.
	`CartesianTooltipActionEventDetail`	CustomEvent.detail 타입: CartesianTooltipActionEventDetail. 이벤트 이름은 대소문자를 구분합니다.
	`CartesianZoomChangeEventDetail`	Every zoom / pan change (drag, pan, wheel, pinch, keyboard, API, reset).

메서드 36

Stencil 메서드는 Promise를 반환합니다. async 함수에서 await로 결과를 받으세요.

메서드 / 인수	반환 타입	설명
	`Promise<ChartDataTable>`	Current normalized table, including the retained stream; independent of GPU availability.
	`Promise<CalendarHeatmapRenderResult>`	Draws a frame now; rejects with the SyidaxLicenseError while the type is not entitled or the chart is frozen.
	`Promise<CalendarHeatmapEngineTier>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<string \| undefined>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
data: CalendarHeatmapData	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
entry: CalendarHeatmapEntry	`Promise<void>`	Upsert one day entry through the stream (folded with `aggregate`).
entries: ReadonlyArray<CalendarHeatmapEntry>	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
count: number	`Promise<void>`	Drop the `count` oldest STREAMED entries (the `data` prop's entries are not a stream).
entries: ReadonlyArray<CalendarHeatmapEntry>	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<CalendarHeatmapStreamSource \| undefined>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
options: { duration?: number; easing?: CalendarHeatmapEasing; enabled?: boolean; type?: CalendarHeatmapAnimationType }	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
cssX: number, cssY: number	`Promise<CalendarHeatmapPointEventDetail \| null>`	The day under host-relative CSS coordinates, or null (outside the strip, or a corner cell outside the range).
date: CalendarDateInput	`Promise<number \| null>`	The folded value of a day (`null` for a day without entries or outside the range).
	`Promise<CalendarHeatmapValueExtent \| null>`	The data's extent (the fill never counts).
	`Promise<{ weeks: number; rows: number; cells: number; days: number; valued: number; entries: number; dropped: number }>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<CalendarHeatmapRange>`	The resolved range.
	`Promise<CalendarMonthMark[]>`	The month marks (labels + boundary anchors).
week: number, weekday: number	`Promise<CartesianTooltipEventDetail \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
date: CalendarDateInput	`Promise<CartesianTooltipEventDetail \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
index: number	`Promise<CartesianTooltipEventDetail \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
week: number, weekday: number	`Promise<CalendarHeatmapPointEventDetail \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
date: CalendarDateInput	`Promise<CalendarHeatmapPointEventDetail \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
binding: VisualMapBinding \| null	`Promise<VisualMapBinding \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<VisualMapBinding \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
request?: VisualMapExtentRequest	`Promise<VisualMapExtent \| null>`	The extent of a dimension: `value` = the day values, `x` = the week columns, `y` = the weekday rows, `index` = the cells.
request: CartesianZoomRequest	`Promise<CartesianZoomChangeEventDetail \| null>`	Zoom to explicit windows of the strip (`x` / `y` as `{ min, max }` or `[min, max]` fractions 0 … 1; `null` clears that orientation).
factor: number, anchorFraction?: number	`Promise<CartesianZoomChangeEventDetail \| null>`	Scale the current windows by `factor` (< 1 zooms in) around `anchorFraction` (0..1, default centre).
delta: { x?: number; y?: number }	`Promise<CartesianZoomChangeEventDetail \| null>`	Slide the zoomed windows by fractions of the strip (`{ x?, y? }`); a no-op at the full extent.
	`Promise<CartesianZoomChangeEventDetail \| null>`	Back to the whole strip.
	`Promise<CartesianZoomState \| null>`	The current zoom state (`null` = the whole strip).
request?: CartesianZoomExtentRequest	`Promise<CartesianZoomExtentDetail \| null>`	The full extent of the viewport axes (`[0, 1]` each, key `'0'`).
	`Promise<ChartEngineStatus>`	Requested engine vs what runs, and why (CHART-ADD-08): the decision for the current inputs, read without side effects (ProChartLicense.engineStatus); a renderer that failed at run time reports engine-unsupported.

Calendar Heatmap.

일별 활동

사용과 데이터

데이터 계약

데이터를 갱신할 때

기능별 예제

화면에 적용하기

API 레퍼런스

주요 속성