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.

Feature examples

Try 16 interactive feature examples and inspect their code. Select “Edit in preview” to combine more options in the settings panel above.