# Calendar Heatmap

Show daily activity as colors on a calendar.

Canonical: https://chart.syidax.com/docs/components/calendar-heatmap/

<a id="overview"></a>

## sy-calendar-heatmap

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.

Base chart tier: Pro. Features such as additional renderers and custom branding have separate entitlement requirements.

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

- [Run in Components](https://chart.syidax.com/charts/calendar-heatmap) — Change options and view framework-specific code
- [Shared installation and integration](https://chart.syidax.com/docs/getting-started.md)

<a id="example"></a>

## Complete implementation example

```html
<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>
```

<a id="props"></a>

## Properties

<a id="property-data"></a>

### data

An array of { date, value }. The example uses YYYY-MM-DD dates.

| Item | Value |
| --- | --- |
| JavaScript property | `data` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `CalendarHeatmapData` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CalendarHeatmapData](https://chart.syidax.com/docs/types/CalendarHeatmapData.md) — Type definition

<a id="property-width"></a>

### width

Chart width in pixels. If the container width changes, update width from a ResizeObserver.

| Item | Value |
| --- | --- |
| JavaScript property | `width` |
| HTML attribute | `width` |
| Type | `number` |
| Default | `900` |

<a id="property-height"></a>

### height

Chart height in pixels. Allow space for axes, titles, and the legend.

| Item | Value |
| --- | --- |
| JavaScript property | `height` |
| HTML attribute | `height` |
| Type | `number` |
| Default | `180` |

<a id="property-brandLogo"></a>

### brandLogo

The default is the Syidax symbol and wordmark. With the Pro chart.branding entitlement, set none to remove it or provide a PNG, JPEG, or WebP data URL to replace it.

| Item | Value |
| --- | --- |
| JavaScript property | `brandLogo` |
| HTML attribute | `brand-logo` |
| Type | `string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-brandPosition"></a>

### brandPosition

The corner where the logo is anchored. Community and Pro both support all four corners, using the same position on screen and in image exports.

| Item | Value |
| --- | --- |
| JavaScript property | `brandPosition` |
| HTML attribute | `brand-position` |
| Type | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` |
| Default | `'bottom-right'` |
| Allowed values | `top-left`, `top-right`, `bottom-left`, `bottom-right` |

<a id="property-year"></a>

### year

The range: a year (Jan 1 … Dec 31); `start-date` / `end-date` win over it; neither → the data's span.

| Item | Value |
| --- | --- |
| JavaScript property | `year` |
| HTML attribute | `year` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-startDate"></a>

### startDate

Set as an HTML attribute or JavaScript property. type: string.

| Item | Value |
| --- | --- |
| JavaScript property | `startDate` |
| HTML attribute | `start-date` |
| Type | `string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-endDate"></a>

### endDate

Set as an HTML attribute or JavaScript property. type: string.

| Item | Value |
| --- | --- |
| JavaScript property | `endDate` |
| HTML attribute | `end-date` |
| Type | `string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-weekStart"></a>

### weekStart

monday or sunday.

| Item | Value |
| --- | --- |
| JavaScript property | `weekStart` |
| HTML attribute | `week-start` |
| Type | `CalendarWeekStart` |
| Default | `'monday'` |
| Allowed values | `monday`, `sunday` |

- [CalendarWeekStart](https://chart.syidax.com/docs/types/CalendarWeekStart.md) — Type definition

<a id="property-aggregate"></a>

### aggregate

How several entries on one day fold: `sum` (default), `max`, `min`, `mean`, `last`.

| Item | Value |
| --- | --- |
| JavaScript property | `aggregate` |
| HTML attribute | `aggregate` |
| Type | `CalendarAggregate` |
| Default | `'sum'` |
| Allowed values | `sum`, `max`, `min`, `mean`, `last` |

- [CalendarAggregate](https://chart.syidax.com/docs/types/CalendarAggregate.md) — Type definition

<a id="property-noDataValue"></a>

### noDataValue

What a day without entries reads on the plane: a number (default 0 → the ramp's first colour) or `nan` (→ `empty-color`).

| Item | Value |
| --- | --- |
| JavaScript property | `noDataValue` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `number \| 'nan'` |
| Default | `0` |
| Literals in the type | `nan` |

<a id="property-colors"></a>

### colors

The colour ramp (a scheme name, a colour list / comma list, or `[t, colour]` stops); default GitHub's greens.

| Item | Value |
| --- | --- |
| JavaScript property | `colors` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `string \| ReadonlyArray<string> \| ReadonlyArray<readonly [number, string]>` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-valueMin"></a>

### valueMin

Domain ends; an omitted end follows the data (the min includes the fill, so 0 is the ramp start).

| Item | Value |
| --- | --- |
| JavaScript property | `valueMin` |
| HTML attribute | `value-min` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-valueMax"></a>

### valueMax

Set as an HTML attribute or JavaScript property. type: number.

| Item | Value |
| --- | --- |
| JavaScript property | `valueMax` |
| HTML attribute | `value-max` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-emptyColor"></a>

### emptyColor

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.

| Item | Value |
| --- | --- |
| JavaScript property | `emptyColor` |
| HTML attribute | `empty-color` |
| Type | `string` |
| Default | `'transparent'` |

<a id="property-cellGap"></a>

### cellGap

CSS px between cells.

| Item | Value |
| --- | --- |
| JavaScript property | `cellGap` |
| HTML attribute | `cell-gap` |
| Type | `number` |
| Default | `2` |

<a id="property-cellRadius"></a>

### cellRadius

The cell corner radius in CSS px.

| Item | Value |
| --- | --- |
| JavaScript property | `cellRadius` |
| HTML attribute | `cell-radius` |
| Type | `number` |
| Default | `2` |

<a id="property-cellBorder"></a>

### cellBorder

Set as an HTML attribute or JavaScript property. type: number.

| Item | Value |
| --- | --- |
| JavaScript property | `cellBorder` |
| HTML attribute | `cell-border` |
| Type | `number` |
| Default | `0` |

<a id="property-cellBorderColor"></a>

### cellBorderColor

Set as an HTML attribute or JavaScript property. type: string.

| Item | Value |
| --- | --- |
| JavaScript property | `cellBorderColor` |
| HTML attribute | `cell-border-color` |
| Type | `string` |
| Default | `'rgba(17,24,39,0.35)'` |

<a id="property-renderPath"></a>

### renderPath

The draw path: `auto` (the cells path from 3 device px per cell — the usual case), or a forced `plane` / `cells`.

| Item | Value |
| --- | --- |
| JavaScript property | `renderPath` |
| HTML attribute | `render-path` |
| Type | `CalendarHeatmapRenderPath` |
| Default | `'auto'` |
| Allowed values | `auto`, `plane`, `cells` |

- [CalendarHeatmapRenderPath](https://chart.syidax.com/docs/types/CalendarHeatmapRenderPath.md) — Type definition

<a id="property-lod"></a>

### lod

Allowed values: auto, point, area, smooth. Default: 'auto'.

| Item | Value |
| --- | --- |
| JavaScript property | `lod` |
| HTML attribute | `lod` |
| Type | `HeatmapLodMode` |
| Default | `'auto'` |
| Allowed values | `auto`, `point`, `area`, `smooth` |

- [HeatmapLodMode](https://chart.syidax.com/docs/types/HeatmapLodMode.md) — Type definition

<a id="property-monthLabels"></a>

### monthLabels

Month labels along the top (a month whose label would overlap the previous one is skipped).

| Item | Value |
| --- | --- |
| JavaScript property | `monthLabels` |
| HTML attribute | `month-labels` |
| Type | `boolean` |
| Default | `true` |

<a id="property-weekdayLabels"></a>

### weekdayLabels

Weekday labels down the left: `short` (rows 0 / 2 / 4), `all`, `none`.

| Item | Value |
| --- | --- |
| JavaScript property | `weekdayLabels` |
| HTML attribute | `weekday-labels` |
| Type | `CalendarWeekdayLabels` |
| Default | `'short'` |
| Allowed values | `none`, `short`, `all` |

- [CalendarWeekdayLabels](https://chart.syidax.com/docs/types/CalendarWeekdayLabels.md) — Type definition

<a id="property-monthLines"></a>

### monthLines

Month boundaries as step lines between the cells.

| Item | Value |
| --- | --- |
| JavaScript property | `monthLines` |
| HTML attribute | `month-lines` |
| Type | `boolean` |
| Default | `true` |

<a id="property-chartTitle"></a>

### chartTitle

The title inside the chart. Explain the data's unit and meaning alongside it.

| Item | Value |
| --- | --- |
| JavaScript property | `chartTitle` |
| HTML attribute | `chart-title` |
| Type | `string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-chartSubtitle"></a>

### chartSubtitle

The subtitle inside the chart.

| Item | Value |
| --- | --- |
| JavaScript property | `chartSubtitle` |
| HTML attribute | `chart-subtitle` |
| Type | `string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-enableMouseTracking"></a>

### enableMouseTracking

Set as an HTML attribute or JavaScript property. type: boolean.

| Item | Value |
| --- | --- |
| JavaScript property | `enableMouseTracking` |
| HTML attribute | `enable-mouse-tracking` |
| Type | `boolean` |
| Default | `true` |

<a id="property-tooltip"></a>

### tooltip

the cell tooltip (the shared cartesian tooltip input: show / trigger / format / html / connector / draggable …).

| Item | Value |
| --- | --- |
| JavaScript property | `tooltip` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `CartesianTooltipInput` |
| Default | `undefined` |
| Literals in the type | `auto`, `off` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CartesianTooltipInput](https://chart.syidax.com/docs/types/CartesianTooltipInput.md) — Type definition

<a id="property-tooltipEnabled"></a>

### tooltipEnabled

Set as an HTML attribute or JavaScript property. type: boolean.

| Item | Value |
| --- | --- |
| JavaScript property | `tooltipEnabled` |
| HTML attribute | `tooltip-show` |
| Type | `boolean` |
| Default | `true` |

<a id="property-tooltipFormat"></a>

### tooltipFormat

a plain-text formatter of the default tooltip (`tooltip.format` wins).

| Item | Value |
| --- | --- |
| JavaScript property | `tooltipFormat` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `(detail: CalendarHeatmapPointEventDetail) => string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CalendarHeatmapPointEventDetail](https://chart.syidax.com/docs/types/CalendarHeatmapPointEventDetail.md) — Type definition

<a id="property-animated"></a>

### animated

Whether to animate initial display and data changes.

| Item | Value |
| --- | --- |
| JavaScript property | `animated` |
| HTML attribute | `animate` |
| Type | `boolean` |
| Default | `false` |

<a id="property-animationDuration"></a>

### animationDuration

Animation duration in milliseconds.

| Item | Value |
| --- | --- |
| JavaScript property | `animationDuration` |
| HTML attribute | `animation-duration` |
| Type | `number` |
| Default | `600` |

<a id="property-animationEasing"></a>

### animationEasing

Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.

| Item | Value |
| --- | --- |
| JavaScript property | `animationEasing` |
| HTML attribute | `animation-easing` |
| Type | `CalendarHeatmapEasing` |
| Default | `'ease-out'` |
| Allowed values | `linear`, `ease-out`, `ease-in`, `ease-in-out` |

- [CalendarHeatmapEasing](https://chart.syidax.com/docs/types/CalendarHeatmapEasing.md) — Type definition

<a id="property-animationType"></a>

### animationType

Allowed values: initial, update. Default: undefined.

| Item | Value |
| --- | --- |
| JavaScript property | `animationType` |
| HTML attribute | `animation-type` |
| Type | `CalendarHeatmapAnimationType` |
| Default | `undefined` |
| Allowed values | `initial`, `update` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CalendarHeatmapAnimationType](https://chart.syidax.com/docs/types/CalendarHeatmapAnimationType.md) — Type definition

<a id="property-streamSource"></a>

### streamSource

A stream source for live data. Check the contract for the specific type.

| Item | Value |
| --- | --- |
| JavaScript property | `streamSource` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `CalendarHeatmapStreamSource` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CalendarHeatmapStreamSource](https://chart.syidax.com/docs/types/CalendarHeatmapStreamSource.md) — Type definition

<a id="property-streamMax"></a>

### streamMax

Streamed entries kept at most (default 10,000): the oldest leave first.

| Item | Value |
| --- | --- |
| JavaScript property | `streamMax` |
| HTML attribute | `stream-max` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-streamWindow"></a>

### streamWindow

The newest N streamed entries the chart folds in (the whole buffer when unset): the upserts of older entries revert to the `data` entries.

| Item | Value |
| --- | --- |
| JavaScript property | `streamWindow` |
| HTML attribute | `stream-window` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-visualMap"></a>

### visualMap

A visual-map binding; it overrides `colors` / `value-min` / `value-max` while bound.

| Item | Value |
| --- | --- |
| JavaScript property | `visualMap` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `VisualMapBinding \| null` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [VisualMapBinding](https://chart.syidax.com/docs/types/VisualMapBinding.md) — Type definition

<a id="property-zoom"></a>

### zoom

Viewport zoom (Storybook parity, 2026-09-10) — the `zoom` attribute the cartesian charts carry: a mode (`'x'` | `'y'` | `'xy'`), `true` (x) or an object (`mode` / `drag` / `keyboard` / `minRangePx` / `resetButton` / `pan` / `wheel` / `pinch` / `inside`); off by default. The strip (the plot between the label bands) is the drawing rectangle — x runs 0 → 1 left to right over the weeks, y 0 → 1 bottom to top over the weekday rows — and the day cells are magnified into the window (their gap keeps its screen size); weeks and rows outside it leave the strip, the month lines, the labels and the hover / focus rings follow the visible cells. `zoomTo` / `zoomBy` / `panBy` / `resetZoom` work regardless of the gesture switches. Property-only (a mode string also works as an attribute).

| Item | Value |
| --- | --- |
| JavaScript property | `zoom` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `CartesianZoomInput` |
| Default | `undefined` |
| Literals in the type | `auto`, `off`, `true`, `false`, `x`, `y`, `xy`, `inside` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CartesianZoomInput](https://chart.syidax.com/docs/types/CartesianZoomInput.md) — Type definition

<a id="property-engine"></a>

### engine

Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type.

| Item | Value |
| --- | --- |
| JavaScript property | `engine` |
| HTML attribute | `engine` |
| Type | `CalendarHeatmapEngineMode` |
| Default | `'auto'` |
| Allowed values | `auto`, `standard`, `pro` |

- [CalendarHeatmapEngineMode](https://chart.syidax.com/docs/types/CalendarHeatmapEngineMode.md) — Type definition

<a id="property-unavailable"></a>

### unavailable

Allowed values: fallback, error. Default: 'fallback'.

| Item | Value |
| --- | --- |
| JavaScript property | `unavailable` |
| HTML attribute | `unavailable` |
| Type | `CalendarHeatmapUnavailableBehaviour` |
| Default | `'fallback'` |
| Allowed values | `fallback`, `error` |

- [CalendarHeatmapUnavailableBehaviour](https://chart.syidax.com/docs/types/CalendarHeatmapUnavailableBehaviour.md) — Type definition

<a id="events"></a>

## Events

<a id="event-rendered"></a>

### rendered

Every drawn frame; `engine` is the engine status (requested / effective / code / the governing license feature).

Event name: `rendered`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<CalendarHeatmapRenderResult & { tier: CalendarHeatmapEngineTier; engine?: ChartEngineStatus }>`.

```javascript
chart.addEventListener('rendered', event => {
  console.log(event.detail); // CalendarHeatmapRenderResult & { tier: CalendarHeatmapEngineTier; engine?: ChartEngineStatus }
});
```

- [CalendarHeatmapRenderResult](https://chart.syidax.com/docs/types/CalendarHeatmapRenderResult.md) — Type definition
- [CalendarHeatmapEngineTier](https://chart.syidax.com/docs/types/CalendarHeatmapEngineTier.md) — Type definition
- [ChartEngineStatus](https://chart.syidax.com/docs/types/ChartEngineStatus.md) — Type definition

<a id="event-pointClick"></a>

### pointClick

A point selection event. Read the selected data and index from CustomEvent.detail.

Event name: `pointClick`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<CalendarHeatmapPointEventDetail>`.

```javascript
chart.addEventListener('pointClick', event => {
  console.log(event.detail); // CalendarHeatmapPointEventDetail
});
```

- [CalendarHeatmapPointEventDetail](https://chart.syidax.com/docs/types/CalendarHeatmapPointEventDetail.md) — Type definition

<a id="event-pointHover"></a>

### pointHover

CustomEvent.detail type: CalendarHeatmapPointEventDetail | null. Event names are case-sensitive.

Event name: `pointHover`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<CalendarHeatmapPointEventDetail | null>`.

```javascript
chart.addEventListener('pointHover', event => {
  console.log(event.detail); // CalendarHeatmapPointEventDetail | null
});
```

- [CalendarHeatmapPointEventDetail](https://chart.syidax.com/docs/types/CalendarHeatmapPointEventDetail.md) — Type definition

<a id="event-pointContextMenu"></a>

### pointContextMenu

CustomEvent.detail type: ChartPointContextMenuEventDetail<CalendarHeatmapPointEventDetail>. Event names are case-sensitive.

Event name: `pointContextMenu`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<ChartPointContextMenuEventDetail<CalendarHeatmapPointEventDetail>>`.

```javascript
chart.addEventListener('pointContextMenu', event => {
  console.log(event.detail); // ChartPointContextMenuEventDetail<CalendarHeatmapPointEventDetail>
});
```

- [ChartPointContextMenuEventDetail](https://chart.syidax.com/docs/types/ChartPointContextMenuEventDetail.md) — Type definition
- [CalendarHeatmapPointEventDetail](https://chart.syidax.com/docs/types/CalendarHeatmapPointEventDetail.md) — Type definition

<a id="event-appended"></a>

### appended

CustomEvent.detail type: { count: number }. Event names are case-sensitive.

Event name: `appended`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<{ count: number }>`.

```javascript
chart.addEventListener('appended', event => {
  console.log(event.detail); // { count: number }
});
```

<a id="event-windowSlid"></a>

### windowSlid

CustomEvent.detail type: { dropped: number }. Event names are case-sensitive.

Event name: `windowSlid`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<{ dropped: number }>`.

```javascript
chart.addEventListener('windowSlid', event => {
  console.log(event.detail); // { dropped: number }
});
```

<a id="event-chartAnimationStart"></a>

### chartAnimationStart

CustomEvent.detail type: void. Event names are case-sensitive.

Event name: `chartAnimationStart`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<void>`.

```javascript
chart.addEventListener('chartAnimationStart', event => {
  console.log(event.detail); // void
});
```

<a id="event-chartAnimationEnd"></a>

### chartAnimationEnd

CustomEvent.detail type: void. Event names are case-sensitive.

Event name: `chartAnimationEnd`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<void>`.

```javascript
chart.addEventListener('chartAnimationEnd', event => {
  console.log(event.detail); // void
});
```

<a id="event-chartAnimationInterrupted"></a>

### chartAnimationInterrupted

CustomEvent.detail type: void. Event names are case-sensitive.

Event name: `chartAnimationInterrupted`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<void>`.

```javascript
chart.addEventListener('chartAnimationInterrupted', event => {
  console.log(event.detail); // void
});
```

<a id="event-tooltipShow"></a>

### tooltipShow

Whether to display the built-in tooltip.

Event name: `tooltipShow`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<CartesianTooltipEventDetail>`.

```javascript
chart.addEventListener('tooltipShow', event => {
  console.log(event.detail); // CartesianTooltipEventDetail
});
```

- [CartesianTooltipEventDetail](https://chart.syidax.com/docs/types/CartesianTooltipEventDetail.md) — Type definition

<a id="event-tooltipHide"></a>

### tooltipHide

CustomEvent.detail type: void. Event names are case-sensitive.

Event name: `tooltipHide`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<void>`.

```javascript
chart.addEventListener('tooltipHide', event => {
  console.log(event.detail); // void
});
```

<a id="event-tooltipAction"></a>

### tooltipAction

CustomEvent.detail type: CartesianTooltipActionEventDetail. Event names are case-sensitive.

Event name: `tooltipAction`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<CartesianTooltipActionEventDetail>`.

```javascript
chart.addEventListener('tooltipAction', event => {
  console.log(event.detail); // CartesianTooltipActionEventDetail
});
```

- [CartesianTooltipActionEventDetail](https://chart.syidax.com/docs/types/CartesianTooltipActionEventDetail.md) — Type definition

<a id="event-zoomChange"></a>

### zoomChange

Every zoom / pan change (drag, pan, wheel, pinch, keyboard, API, reset).

Event name: `zoomChange`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<CartesianZoomChangeEventDetail>`.

```javascript
chart.addEventListener('zoomChange', event => {
  console.log(event.detail); // CartesianZoomChangeEventDetail
});
```

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition

<a id="methods"></a>

## Methods

<a id="method-getDataTable"></a>

### getDataTable

Current normalized table, including the retained stream; independent of GPU availability.

```typescript
getDataTable(): Promise<ChartDataTable>
```

Return type: `Promise<ChartDataTable>`. Call the method after element registration and await its Promise result.

- [ChartDataTable](https://chart.syidax.com/docs/types/ChartDataTable.md) — Type definition

<a id="method-redraw"></a>

### redraw

Redraw the chart using its current data and options. Inspect the rendered result after the returned Promise resolves.

```typescript
redraw(): Promise<CalendarHeatmapRenderResult>
```

Return type: `Promise<CalendarHeatmapRenderResult>`. Call the method after element registration and await its Promise result.

- [CalendarHeatmapRenderResult](https://chart.syidax.com/docs/types/CalendarHeatmapRenderResult.md) — Type definition

<a id="method-getActiveTier"></a>

### getActiveTier

An asynchronous method. Check the argument and return types below.

```typescript
getActiveTier(): Promise<CalendarHeatmapEngineTier>
```

Return type: `Promise<CalendarHeatmapEngineTier>`. Call the method after element registration and await its Promise result.

- [CalendarHeatmapEngineTier](https://chart.syidax.com/docs/types/CalendarHeatmapEngineTier.md) — Type definition

<a id="method-getUnavailableReason"></a>

### getUnavailableReason

Why the WebGPU renderer could not run (the fallback notice's reason); undefined when nothing fell back.

```typescript
getUnavailableReason(): Promise<string | undefined>
```

Return type: `Promise<string | undefined>`. Call the method after element registration and await its Promise result.

<a id="method-setData"></a>

### setData

Replace the bar set.

```typescript
setData(data: CalendarHeatmapData): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `data` | `CalendarHeatmapData` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [CalendarHeatmapData](https://chart.syidax.com/docs/types/CalendarHeatmapData.md) — Type definition

<a id="method-appendPoint"></a>

### appendPoint

Append one value to the stream. Check the argument type and the licensing requirements for streaming.

```typescript
appendPoint(entry: CalendarHeatmapEntry): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `entry` | `CalendarHeatmapEntry` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [CalendarHeatmapEntry](https://chart.syidax.com/docs/types/CalendarHeatmapEntry.md) — Type definition

<a id="method-appendBatch"></a>

### appendBatch

Append multiple values to the stream. Check the argument type and the licensing requirements for streaming.

```typescript
appendBatch(entries: ReadonlyArray<CalendarHeatmapEntry>): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `entries` | `ReadonlyArray<CalendarHeatmapEntry>` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [CalendarHeatmapEntry](https://chart.syidax.com/docs/types/CalendarHeatmapEntry.md) — Type definition

<a id="method-shift"></a>

### shift

Drop the `count` oldest STREAMED entries (the `data` prop's entries are not a stream).

```typescript
shift(count: number): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `count` | `number` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-replace"></a>

### replace

Swap the streamed set (`replace([])` clears it); the base `values` never leave. Without `chart.streaming` the dies upsert into the base like a batch (quietly: no `appended`, no `binChanged`, as a ring replace).

```typescript
replace(entries: ReadonlyArray<CalendarHeatmapEntry>): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `entries` | `ReadonlyArray<CalendarHeatmapEntry>` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [CalendarHeatmapEntry](https://chart.syidax.com/docs/types/CalendarHeatmapEntry.md) — Type definition

<a id="method-getStreamSource"></a>

### getStreamSource

The stream session's source (Chart Pro): like the stream methods it waits for a license still being confirmed.

```typescript
getStreamSource(): Promise<CalendarHeatmapStreamSource | undefined>
```

Return type: `Promise<CalendarHeatmapStreamSource | undefined>`. Call the method after element registration and await its Promise result.

- [CalendarHeatmapStreamSource](https://chart.syidax.com/docs/types/CalendarHeatmapStreamSource.md) — Type definition

<a id="method-setAnimation"></a>

### setAnimation

An asynchronous method. Check the argument and return types below.

```typescript
setAnimation(options: { duration?: number; easing?: CalendarHeatmapEasing; enabled?: boolean; type?: CalendarHeatmapAnimationType }): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `options` | `{ duration?: number; easing?: CalendarHeatmapEasing; enabled?: boolean; type?: CalendarHeatmapAnimationType }` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [CalendarHeatmapEasing](https://chart.syidax.com/docs/types/CalendarHeatmapEasing.md) — Type definition
- [CalendarHeatmapAnimationType](https://chart.syidax.com/docs/types/CalendarHeatmapAnimationType.md) — Type definition

<a id="method-pauseAnimation"></a>

### pauseAnimation

Pause the current animation.

```typescript
pauseAnimation(): Promise<void>
```

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-resumeAnimation"></a>

### resumeAnimation

Resume a paused animation.

```typescript
resumeAnimation(): Promise<void>
```

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-replayAnimation"></a>

### replayAnimation

Replay the initial sweep from min → value(s). No-op when animation is off / reduced.

```typescript
replayAnimation(): Promise<void>
```

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-hitTest"></a>

### hitTest

The day under host-relative CSS coordinates, or null (outside the strip, or a corner cell outside the range).

```typescript
hitTest(cssX: number, cssY: number): Promise<CalendarHeatmapPointEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `cssX` | `number` | Required |
| `cssY` | `number` | Required |

Return type: `Promise<CalendarHeatmapPointEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CalendarHeatmapPointEventDetail](https://chart.syidax.com/docs/types/CalendarHeatmapPointEventDetail.md) — Type definition

<a id="method-getCellValue"></a>

### getCellValue

The folded value of a day (`null` for a day without entries or outside the range).

```typescript
getCellValue(date: CalendarDateInput): Promise<number | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `date` | `CalendarDateInput` | Required |

Return type: `Promise<number | null>`. Call the method after element registration and await its Promise result.

- [CalendarDateInput](https://chart.syidax.com/docs/types/CalendarDateInput.md) — Type definition

<a id="method-getValueExtent"></a>

### getValueExtent

The data's extent (the fill never counts).

```typescript
getValueExtent(): Promise<CalendarHeatmapValueExtent | null>
```

Return type: `Promise<CalendarHeatmapValueExtent | null>`. Call the method after element registration and await its Promise result.

- [CalendarHeatmapValueExtent](https://chart.syidax.com/docs/types/CalendarHeatmapValueExtent.md) — Type definition

<a id="method-getGridSize"></a>

### getGridSize

Columns × rows of the current grid.

```typescript
getGridSize(): Promise<{ weeks: number; rows: number; cells: number; days: number; valued: number; entries: number; dropped: number }>
```

Return type: `Promise<{ weeks: number; rows: number; cells: number; days: number; valued: number; entries: number; dropped: number }>`. Call the method after element registration and await its Promise result.

<a id="method-getRange"></a>

### getRange

The resolved range.

```typescript
getRange(): Promise<CalendarHeatmapRange>
```

Return type: `Promise<CalendarHeatmapRange>`. Call the method after element registration and await its Promise result.

- [CalendarHeatmapRange](https://chart.syidax.com/docs/types/CalendarHeatmapRange.md) — Type definition

<a id="method-getMonthMarks"></a>

### getMonthMarks

The month marks (labels + boundary anchors).

```typescript
getMonthMarks(): Promise<CalendarMonthMark[]>
```

Return type: `Promise<CalendarMonthMark[]>`. Call the method after element registration and await its Promise result.

- [CalendarMonthMark](https://chart.syidax.com/docs/types/CalendarMonthMark.md) — Type definition

<a id="method-showTooltipAtCell"></a>

### showTooltipAtCell

open the tooltip on a cell (week / weekday), honouring the tooltip input; null when the tooltip is off or the cell has no day.

```typescript
showTooltipAtCell(week: number, weekday: number): Promise<CartesianTooltipEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `week` | `number` | Required |
| `weekday` | `number` | Required |

Return type: `Promise<CartesianTooltipEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianTooltipEventDetail](https://chart.syidax.com/docs/types/CartesianTooltipEventDetail.md) — Type definition

<a id="method-showTooltipAtDate"></a>

### showTooltipAtDate

open the tooltip on a day (null outside the range).

```typescript
showTooltipAtDate(date: CalendarDateInput): Promise<CartesianTooltipEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `date` | `CalendarDateInput` | Required |

Return type: `Promise<CartesianTooltipEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianTooltipEventDetail](https://chart.syidax.com/docs/types/CartesianTooltipEventDetail.md) — Type definition
- [CalendarDateInput](https://chart.syidax.com/docs/types/CalendarDateInput.md) — Type definition

<a id="method-showTooltipAtIndex"></a>

### showTooltipAtIndex

open the tooltip on a cell by its public index (`week * 7 + weekday`; the facade's showTooltipAtPoint).

```typescript
showTooltipAtIndex(index: number): Promise<CartesianTooltipEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `index` | `number` | Required |

Return type: `Promise<CartesianTooltipEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianTooltipEventDetail](https://chart.syidax.com/docs/types/CartesianTooltipEventDetail.md) — Type definition

<a id="method-hideTooltip"></a>

### hideTooltip

Close the currently visible tooltip.

```typescript
hideTooltip(): Promise<void>
```

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-focusCellAt"></a>

### focusCellAt

move the keyboard focus ring to a cell and announce it (null for a cell without a day).

```typescript
focusCellAt(week: number, weekday: number): Promise<CalendarHeatmapPointEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `week` | `number` | Required |
| `weekday` | `number` | Required |

Return type: `Promise<CalendarHeatmapPointEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CalendarHeatmapPointEventDetail](https://chart.syidax.com/docs/types/CalendarHeatmapPointEventDetail.md) — Type definition

<a id="method-focusDate"></a>

### focusDate

move the keyboard focus ring to a day (null outside the range).

```typescript
focusDate(date: CalendarDateInput): Promise<CalendarHeatmapPointEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `date` | `CalendarDateInput` | Required |

Return type: `Promise<CalendarHeatmapPointEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CalendarHeatmapPointEventDetail](https://chart.syidax.com/docs/types/CalendarHeatmapPointEventDetail.md) — Type definition
- [CalendarDateInput](https://chart.syidax.com/docs/types/CalendarDateInput.md) — Type definition

<a id="method-setVisualMap"></a>

### setVisualMap

Bind (or clear) a visual map: every mark is coloured through it on the next paint.

```typescript
setVisualMap(binding: VisualMapBinding | null): Promise<VisualMapBinding | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `binding` | `VisualMapBinding \| null` | Required |

Return type: `Promise<VisualMapBinding | null>`. Call the method after element registration and await its Promise result.

- [VisualMapBinding](https://chart.syidax.com/docs/types/VisualMapBinding.md) — Type definition

<a id="method-getVisualMap"></a>

### getVisualMap

An asynchronous method. Check the argument and return types below.

```typescript
getVisualMap(): Promise<VisualMapBinding | null>
```

Return type: `Promise<VisualMapBinding | null>`. Call the method after element registration and await its Promise result.

- [VisualMapBinding](https://chart.syidax.com/docs/types/VisualMapBinding.md) — Type definition

<a id="method-getVisualExtent"></a>

### getVisualExtent

The extent of a dimension: `value` = the day values, `x` = the week columns, `y` = the weekday rows, `index` = the cells.

```typescript
getVisualExtent(request?: VisualMapExtentRequest): Promise<VisualMapExtent | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `request` | `VisualMapExtentRequest` | Optional |

Return type: `Promise<VisualMapExtent | null>`. Call the method after element registration and await its Promise result.

- [VisualMapExtent](https://chart.syidax.com/docs/types/VisualMapExtent.md) — Type definition
- [VisualMapExtentRequest](https://chart.syidax.com/docs/types/VisualMapExtentRequest.md) — Type definition

<a id="method-zoomTo"></a>

### zoomTo

Zoom to explicit windows of the strip (`x` / `y` as `{ min, max }` or `[min, max]` fractions 0 … 1; `null` clears that orientation).

```typescript
zoomTo(request: CartesianZoomRequest): Promise<CartesianZoomChangeEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `request` | `CartesianZoomRequest` | Required |

Return type: `Promise<CartesianZoomChangeEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition
- [CartesianZoomRequest](https://chart.syidax.com/docs/types/CartesianZoomRequest.md) — Type definition

<a id="method-zoomBy"></a>

### zoomBy

Scale the current windows by `factor` (< 1 zooms in) around `anchorFraction` (0..1, default centre).

```typescript
zoomBy(factor: number, anchorFraction?: number): Promise<CartesianZoomChangeEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `factor` | `number` | Required |
| `anchorFraction` | `number` | Optional |

Return type: `Promise<CartesianZoomChangeEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition

<a id="method-panBy"></a>

### panBy

Slide the zoomed windows by fractions of the strip (`{ x?, y? }`); a no-op at the full extent.

```typescript
panBy(delta: { x?: number; y?: number }): Promise<CartesianZoomChangeEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `delta` | `{ x?: number; y?: number }` | Required |

Return type: `Promise<CartesianZoomChangeEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition

<a id="method-resetZoom"></a>

### resetZoom

Reset the zoomed or panned range to the original data range.

```typescript
resetZoom(): Promise<CartesianZoomChangeEventDetail | null>
```

Return type: `Promise<CartesianZoomChangeEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition

<a id="method-getZoom"></a>

### getZoom

Read the current zoom range. Check the return type's nullability and the range for each axis.

```typescript
getZoom(): Promise<CartesianZoomState | null>
```

Return type: `Promise<CartesianZoomState | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomState](https://chart.syidax.com/docs/types/CartesianZoomState.md) — Type definition

<a id="method-getZoomExtent"></a>

### getZoomExtent

The full extent of the viewport axes (`[0, 1]` each, key `'0'`).

```typescript
getZoomExtent(request?: CartesianZoomExtentRequest): Promise<CartesianZoomExtentDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `request` | `CartesianZoomExtentRequest` | Optional |

Return type: `Promise<CartesianZoomExtentDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomExtentDetail](https://chart.syidax.com/docs/types/CartesianZoomExtentDetail.md) — Type definition
- [CartesianZoomExtentRequest](https://chart.syidax.com/docs/types/CartesianZoomExtentRequest.md) — Type definition

<a id="method-getEngineStatus"></a>

### getEngineStatus

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.

```typescript
getEngineStatus(): Promise<ChartEngineStatus>
```

Return type: `Promise<ChartEngineStatus>`. Call the method after element registration and await its Promise result.

- [ChartEngineStatus](https://chart.syidax.com/docs/types/ChartEngineStatus.md) — Type definition