Calendar Heatmap.

PRO

Show daily activity as colors on a calendar.

<sy-calendar-heatmap>Installation and integration API reference

LIVE EXAMPLE

Daily activity

Match the page theme

Interact with the chart to see selection and range-change results here.

OptionsChanges are reflected in the preview and code.

Appearance and style7

Week starts onDaily aggregationCell spacingCell cornersWeekday labels

Month namesMonth boundaries

Legend and interaction11

Animation duration (ms)Animation easingAnimation triggerTooltip modeTooltip triggerSimultaneous tooltipsDrag to zoom

Show tooltipAnimationDraggable tooltipTooltip connector

Title and dimensions3

Chart titleChart subtitleChart height (px)

Position measurements by calendar date. All values are sample data.

View code

Current preview

<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: complete registerLicense at app startup using your issued certificate.
  // The website preview certificate is not for use in customer apps.
  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 example chart');
    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);

  // In an SPA, call this function when the view is disposed.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('pointClick', onEvent);
    container.replaceChildren();
  }
</script>

Usage and data

Inspect weekly patterns in daily usage, performance, attendance, and similar measures.

Distinguish missing dates from actual zero values. Keep date formatting and the first day of the week consistent.

Data contract

Property	Input format
`data`	An array of { date, value }. The example uses YYYY-MM-DD dates.
`weekStart`	monday or sunday.

Updating data

Assign a new array or object to the property instead of mutating values inside an array. Chart events provide selection results through event.detail. When disposing of the view, clean up ResizeObserver and event listeners registered by your app.

Add to your interface

The code tabs below the preview contain the full data, options, event bindings, and responsive sizing for the current example. Copy them into an app project, such as Vite, that can resolve the installed packages.

Shared sy-chart API versus direct tags

API reference

The full public API for sy-calendar-heatmap. Pass objects and arrays as JavaScript properties. Select a name to view usage code and type definitions.

Key properties

Attribute / Property	Type / Default	Description
	`CalendarHeatmapData`Default: undefined	An array of { date, value }. The example uses YYYY-MM-DD dates.
	`number`Default: 900	Chart width in pixels. Update with ResizeObserver when the container changes.
	`number`Default: 180	Chart height in pixels.
brandLogo	`string`Default: undefined	The default is the Syidax logo. With the Pro chart.branding entitlement, use none or a PNG, JPEG, or WebP data URL.
brandPosition	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`Default: 'bottom-right'	The corner where the logo is anchored. Applies equally to Community and Pro, on screen and in image exports.
weekStart	`CalendarWeekStart`Default: 'monday'	monday or sunday.
	`CalendarAggregate`Default: 'sum'	How several entries on one day fold: `sum` (default), `max`, `min`, `mean`, `last`.
cellGap	`number`Default: 2	CSS px between cells.
cellRadius	`number`Default: 2	The cell corner radius in CSS px.
monthLabels	`boolean`Default: true	Month labels along the top (a month whose label would overlap the previous one is skipped).
weekdayLabels	`CalendarWeekdayLabels`Default: 'short'	Weekday labels down the left: `short` (rows 0 / 2 / 4), `all`, `none`.
monthLines	`boolean`Default: true	Month boundaries as step lines between the cells.
chartTitle	`string`Default: undefined	The title inside the chart. Explain the data's unit and meaning alongside it.
chartSubtitle	`string`Default: undefined	The subtitle inside the chart.
	`CartesianTooltipInput`Default: undefined	Tooltip settings for pointer-driven values, position, and content.
tooltipEnabled	`boolean`Default: true	Set as an HTML attribute or JavaScript property. type: boolean.
animated	`boolean`Default: false	Whether to animate initial display and data changes.
animationDuration	`number`Default: 600	Animation duration in milliseconds.
animationEasing	`CalendarHeatmapEasing`Default: 'ease-out'	Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.
animationType	`CalendarHeatmapAnimationType`Default: undefined	Allowed values: initial, update. Default: undefined.
	`CartesianZoomInput`Default: undefined	Settings for zooming and the visible range.

Other properties 20

Attribute / Property	Type / Default	Description
	`number`Default: undefined	The range: a year (Jan 1 … Dec 31); `start-date` / `end-date` win over it; neither → the data's span.
startDate	`string`Default: undefined	Set as an HTML attribute or JavaScript property. type: string.
endDate	`string`Default: undefined	Set as an HTML attribute or JavaScript property. type: string.
noDataValue	`number \| 'nan'`Default: 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]>`Default: undefined	The colour ramp (a scheme name, a colour list / comma list, or `[t, colour]` stops); default GitHub's greens.
valueMin	`number`Default: undefined	Domain ends; an omitted end follows the data (the min includes the fill, so 0 is the ramp start).
valueMax	`number`Default: undefined	Set as an HTML attribute or JavaScript property. type: number.
emptyColor	`string`Default: '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`Default: 0	Set as an HTML attribute or JavaScript property. type: number.
cellBorderColor	`string`Default: 'rgba(17,24,39,0.35)'	Set as an HTML attribute or JavaScript property. type: string.
renderPath	`CalendarHeatmapRenderPath`Default: 'auto'	The draw path: `auto` (the cells path from 3 device px per cell — the usual case), or a forced `plane` / `cells`.
	`HeatmapLodMode`Default: 'auto'	Allowed values: auto, point, area, smooth. Default: 'auto'.
enableMouseTracking	`boolean`Default: true	Set as an HTML attribute or JavaScript property. type: boolean.
tooltipFormat	`(detail: CalendarHeatmapPointEventDetail) => string`Default: undefined	Pass as a JavaScript property. type: (detail: CalendarHeatmapPointEventDetail) => string.
streamSource	`CalendarHeatmapStreamSource`Default: undefined	A stream source for live data. Check the contract for the specific type.
streamMax	`number`Default: undefined	The maximum number of streaming data points to retain.
streamWindow	`number`Default: undefined	The streaming data range to keep visible.
visualMap	`VisualMapBinding \| null`Default: undefined	A visual-map binding; it overrides `colors` / `value-min` / `value-max` while bound.
	`CalendarHeatmapEngineMode`Default: 'auto'	Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type.
	`CalendarHeatmapUnavailableBehaviour`Default: 'fallback'	Allowed values: fallback, error. Default: 'fallback'.

Events 13

Events	Detail type	Description
	`CalendarHeatmapRenderResult & { tier: CalendarHeatmapEngineTier; engine?: ChartEngineStatus }`	Emits rendering results in detail when chart drawing completes.
	`CalendarHeatmapPointEventDetail`	A point selection event. Read the selected data and index from CustomEvent.detail.
	`CalendarHeatmapPointEventDetail \| null`	CustomEvent.detail type: CalendarHeatmapPointEventDetail \| null. Event names are case-sensitive.
	`ChartPointContextMenuEventDetail<CalendarHeatmapPointEventDetail>`	CustomEvent.detail type: ChartPointContextMenuEventDetail<CalendarHeatmapPointEventDetail>. Event names are case-sensitive.
	`{ count: number }`	CustomEvent.detail type: { count: number }. Event names are case-sensitive.
	`{ dropped: number }`	CustomEvent.detail type: { dropped: number }. Event names are case-sensitive.
	`void`	CustomEvent.detail type: void. Event names are case-sensitive.
	`void`	CustomEvent.detail type: void. Event names are case-sensitive.
	`void`	CustomEvent.detail type: void. Event names are case-sensitive.
	`CartesianTooltipEventDetail`	Whether to display the built-in tooltip.
	`void`	CustomEvent.detail type: void. Event names are case-sensitive.
	`CartesianTooltipActionEventDetail`	CustomEvent.detail type: CartesianTooltipActionEventDetail. Event names are case-sensitive.
	`CartesianZoomChangeEventDetail`	Every zoom / pan change (drag, pan, wheel, pinch, keyboard, API, reset).

Methods 36

Stencil methods return Promises. Use await within an async function to read the result.

Method / Arguments	Return type	Description
	`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>`	An asynchronous method. Check the argument and return types below.
	`Promise<string \| undefined>`	An asynchronous method. Check the argument and return types below.
data: CalendarHeatmapData	`Promise<void>`	An asynchronous method. Check the argument and return types below.
entry: CalendarHeatmapEntry	`Promise<void>`	Upsert one day entry through the stream (folded with `aggregate`).
entries: ReadonlyArray<CalendarHeatmapEntry>	`Promise<void>`	An asynchronous method. Check the argument and return types below.
count: number	`Promise<void>`	Drop the `count` oldest STREAMED entries (the `data` prop's entries are not a stream).
entries: ReadonlyArray<CalendarHeatmapEntry>	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<CalendarHeatmapStreamSource \| undefined>`	An asynchronous method. Check the argument and return types below.
options: { duration?: number; easing?: CalendarHeatmapEasing; enabled?: boolean; type?: CalendarHeatmapAnimationType }	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
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 }>`	An asynchronous method. Check the argument and return types below.
	`Promise<CalendarHeatmapRange>`	The resolved range.
	`Promise<CalendarMonthMark[]>`	The month marks (labels + boundary anchors).
week: number, weekday: number	`Promise<CartesianTooltipEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
date: CalendarDateInput	`Promise<CartesianTooltipEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
index: number	`Promise<CartesianTooltipEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
week: number, weekday: number	`Promise<CalendarHeatmapPointEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
date: CalendarDateInput	`Promise<CalendarHeatmapPointEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
binding: VisualMapBinding \| null	`Promise<VisualMapBinding \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<VisualMapBinding \| null>`	An asynchronous method. Check the argument and return types below.
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.

Daily activity

Usage and data

Data contract

Updating data

Feature examples

Start on MondayPRO

Calendar labelsPRO

Inspect values with the pointerPRO

Drag to zoom and panPRO

Replay animationPRO

AnimationPRO

Data inputPRO

Large datasetsPRO

SizePRO

TooltipPRO

Zoom and panPRO

Context menuPRO

Data context menuPRO

Read coordinates and dataPRO

OverviewPRO

Streaming · Add and update live dataPRO

Add to your interface

API reference

Key properties