# Polar

Arrange directions or cycles in polar coordinates.

Canonical: https://chart.syidax.com/docs/components/polar/

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

## sy-polar-chart

Use for categories whose end connects to the beginning, such as wind direction or time of day.

Cartesian coordinates are easier to read for ordinary rankings. Category order determines the meaning of the circle.

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

| Input | Data description |
| --- | --- |
| `data` | A number array or series array of { name, data, color? }. |
| `categories` | Names for each direction or angle. |
| `variant` | Choose rose, bar, or line. |

- [Run in Components](https://chart.syidax.com/charts/polar) — 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/components/sy-polar-chart.js';
  define0();

  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-polar-chart",
      "props": {
        "engine": "standard",
        "data": [45, 70, 55, 35, 65, 80, 50, 40],
        "categories": ["N", "NE", "E", "SE", "S", "SW", "W", "NW"],
        "variant": "rose",
        "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', 'polar 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-variant"></a>

### variant

Choose rose, bar, or line.

| Item | Value |
| --- | --- |
| JavaScript property | `variant` |
| HTML attribute | `variant` |
| Type | `PolarChartVariant` |
| Default | `'rose'` |
| Allowed values | `line`, `rose`, `bar` |

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

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

### data

A number array or series array of { name, data, color? }.

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

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

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

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

### categories

Names for each direction or angle.

| Item | Value |
| --- | --- |
| JavaScript property | `categories` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| 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-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 | `520` |

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

<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-palette"></a>

### palette

Allowed values: tableau10, tableau20, observable10, paired12, set3_12. Default: 'tableau10'.

| Item | Value |
| --- | --- |
| JavaScript property | `palette` |
| HTML attribute | `palette` |
| Type | `PolarChartPaletteName` |
| Default | `'tableau10'` |
| Allowed values | `tableau10`, `tableau20`, `observable10`, `paired12`, `set3_12` |

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

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

### colors

Pass as a JavaScript property. type: ReadonlyArray<string>.

| Item | Value |
| --- | --- |
| JavaScript property | `colors` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `ReadonlyArray<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-stacking"></a>

### stacking

Stack mode — `normal` (value units) or `percent` (each direction fills 100%).

| Item | Value |
| --- | --- |
| JavaScript property | `stacking` |
| HTML attribute | `stacking` |
| Type | `PolarChartStackingMode` |
| Default | `'normal'` |
| Allowed values | `normal`, `percent` |

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

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

### sectorPadding

Fraction of each angular slot kept as whitespace (half each side), 0..0.8.

| Item | Value |
| --- | --- |
| JavaScript property | `sectorPadding` |
| HTML attribute | `sector-padding` |
| Type | `number` |
| Default | `0.12` |

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

### barPadding

`bar`: the fraction of each series' sub-slot kept as whitespace (half each side), 0..0.8.

| Item | Value |
| --- | --- |
| JavaScript property | `barPadding` |
| HTML attribute | `bar-padding` |
| Type | `number` |
| Default | `0.1` |

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

### lineWidth

`line`: the stroke width in CSS px.

| Item | Value |
| --- | --- |
| JavaScript property | `lineWidth` |
| HTML attribute | `line-width` |
| Type | `number` |
| Default | `2` |

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

### markerSize

`line`: the marker radius in CSS px (0 hides the markers).

| Item | Value |
| --- | --- |
| JavaScript property | `markerSize` |
| HTML attribute | `marker-size` |
| Type | `number` |
| Default | `4` |

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

### fillOpacity

`line`: the area fill opacity under each polyline (0 = no fill).

| Item | Value |
| --- | --- |
| JavaScript property | `fillOpacity` |
| HTML attribute | `fill-opacity` |
| Type | `number` |
| Default | `0` |

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

### max

Radial-axis max in value units; 'auto' (default) nice-ceils the stacked max.

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

<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-gridColor"></a>

### gridColor

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

| Item | Value |
| --- | --- |
| JavaScript property | `gridColor` |
| HTML attribute | `grid-color` |
| Type | `string` |
| Default | `'#e2e8f0'` |

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

### showRingLabels

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

| Item | Value |
| --- | --- |
| JavaScript property | `showRingLabels` |
| HTML attribute | `show-ring-labels` |
| Type | `boolean` |
| Default | `true` |

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

### ringLabelColor

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

| Item | Value |
| --- | --- |
| JavaScript property | `ringLabelColor` |
| HTML attribute | `ring-label-color` |
| Type | `string` |
| Default | `'#6b7280'` |

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

### ringLabelFontSize

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

| Item | Value |
| --- | --- |
| JavaScript property | `ringLabelFontSize` |
| HTML attribute | `ring-label-font-size` |
| Type | `number` |
| Default | `10` |

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

### categoryLabelColor

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

| Item | Value |
| --- | --- |
| JavaScript property | `categoryLabelColor` |
| HTML attribute | `category-label-color` |
| Type | `string` |
| Default | `'#374151'` |

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

### categoryLabelFontSize

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

| Item | Value |
| --- | --- |
| JavaScript property | `categoryLabelFontSize` |
| HTML attribute | `category-label-font-size` |
| Type | `number` |
| Default | `12` |

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

### legend

Whether to show a legend for series or items.

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

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

### legendPosition

Edge to dock the legend on, or `float` — an overlay inside the rose's drawing rectangle (Storybook parity, 2026-09-10).

| Item | Value |
| --- | --- |
| JavaScript property | `legendPosition` |
| HTML attribute | `legend-position` |
| Type | `PolarChartLegendPosition` |
| Default | `'bottom'` |
| Allowed values | `top`, `bottom`, `left`, `right`, `float` |

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

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

### legendItems

Pass as a JavaScript property. type: LegendItem[].

| Item | Value |
| --- | --- |
| JavaScript property | `legendItems` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `LegendItem[]` |
| Default | `undefined` |

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

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

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

### legendFloatAlign

`legend-position="float"`: the overlay's horizontal anchor inside the drawing rectangle.

| Item | Value |
| --- | --- |
| JavaScript property | `legendFloatAlign` |
| HTML attribute | `legend-float-align` |
| Type | `'start' \| 'center' \| 'end'` |
| Default | `'end'` |
| Allowed values | `start`, `center`, `end` |

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

### legendFloatVerticalAlign

`legend-position="float"`: the overlay's vertical anchor inside the drawing rectangle.

| Item | Value |
| --- | --- |
| JavaScript property | `legendFloatVerticalAlign` |
| HTML attribute | `legend-float-vertical-align` |
| Type | `'top' \| 'middle' \| 'bottom'` |
| Default | `'top'` |
| Allowed values | `top`, `bottom`, `middle` |

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

### legendDraggable

`legend-position="float"`: the floating legend can be dragged inside the chart bounds.

| Item | Value |
| --- | --- |
| JavaScript property | `legendDraggable` |
| HTML attribute | `legend-draggable` |
| Type | `boolean` |
| Default | `false` |

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

### tooltipShow

Whether to display the built-in tooltip.

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

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

### tooltipFormat

Pass as a JavaScript property. type: (segment: PolarRoseSegment) => string.

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

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

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

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

### tooltip

Rich tooltip configuration object (family-parity surface). Property-only.

| Item | Value |
| --- | --- |
| JavaScript property | `tooltip` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `PolarChartTooltipInput` |
| 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.

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

<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-zoom"></a>

### zoom

Storybook parity (2026-09-10) — viewport zoom: `'x'` | `'y'` | `'xy'` | `true` (x) enable the drag rectangle, the pan, Ctrl + wheel, the pinch and the keyboard (`+` / `-` / `Escape`) over the rose's drawing rectangle (x 0 → 1 left → right, y 0 → 1 bottom → top, like a cartesian plot); an object refines `mode` / `drag` / `keyboard` / `minRangePx` / `resetButton` / `pan` / `wheel` / `pinch` / `inside`. Off by default. `zoomTo` / `zoomBy` / `panBy` / `resetZoom` work regardless of the gesture switches. Property-only (an object or a mode string).

| 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 | `PolarChartEngineMode` |
| Default | `'auto'` |
| Allowed values | `auto`, `standard`, `pro` |

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

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

### unavailable

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

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

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

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

### proThreshold

`auto` goes Pro at this many marks (the stacked sectors the rose draws) and stays there while Pro is available.

| Item | Value |
| --- | --- |
| JavaScript property | `proThreshold` |
| HTML attribute | `pro-threshold` |
| Type | `number` |
| Default | `POLAR_DEFAULT_PRO_THRESHOLD` |

<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 | `PolarChartStreamSource` |
| Default | `undefined` |

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

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

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

### streamWindow

The streaming data range to keep visible.

| 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-streamMax"></a>

### streamMax

The maximum number of streaming data points to retain.

| 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-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 | `PolarChartEasing` |
| Default | `'ease-out'` |
| Allowed values | `linear`, `ease-out`, `ease-in`, `ease-in-out` |

- [PolarChartEasing](https://chart.syidax.com/docs/types/PolarChartEasing.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 | `PolarChartAnimationType` |
| 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.

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

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

## Events

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

### rendered

Emits rendering results in detail when chart drawing completes.

Event name: `rendered`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<PolarChartRenderResult & { tier: PolarChartEngineTier }>`.

```javascript
chart.addEventListener('rendered', event => {
  console.log(event.detail); // PolarChartRenderResult & { tier: PolarChartEngineTier }
});
```

- [PolarChartRenderResult](https://chart.syidax.com/docs/types/PolarChartRenderResult.md) — Type definition
- [PolarChartEngineTier](https://chart.syidax.com/docs/types/PolarChartEngineTier.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<PolarChartPointEventDetail>`.

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

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

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

### pointHover

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

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

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

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

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

### pointContextMenu

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

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

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

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

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

### legendItemClick

CustomEvent.detail type: { index: number; seriesId: string; label: string; disabled: boolean }. Event names are case-sensitive.

Event name: `legendItemClick`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<{ index: number; seriesId: string; label: string; disabled: boolean }>`.

```javascript
chart.addEventListener('legendItemClick', event => {
  console.log(event.detail); // { index: number; seriesId: string; label: string; disabled: boolean }
});
```

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

### seriesToggled

CustomEvent.detail type: { index: number; seriesId: string; disabled: boolean }. Event names are case-sensitive.

Event name: `seriesToggled`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<{ index: number; seriesId: string; disabled: boolean }>`.

```javascript
chart.addEventListener('seriesToggled', event => {
  console.log(event.detail); // { index: number; seriesId: string; disabled: boolean }
});
```

<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<PolarChartTooltipShowEventDetail>`.

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

- [PolarChartTooltipShowEventDetail](https://chart.syidax.com/docs/types/PolarChartTooltipShowEventDetail.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: PolarChartTooltipActionEventDetail. Event names are case-sensitive.

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

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

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

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

### zoomChange

Storybook parity (2026-09-10) — fired after every zoom change (drag / pan / wheel / pinch / keyboard / api / reset) with the new state.

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-redraw"></a>

### redraw

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

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

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

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

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

### getActiveTier

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

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

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

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

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

### getDataTable

Current normalized source table, including retained streaming rows, independent of the renderer.

```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-setData"></a>

### setData

Replace the bar set.

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

| Arguments | Type | Required |
| --- | --- | --- |
| `data` | `PolarChartData` | Required |

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

- [PolarChartData](https://chart.syidax.com/docs/types/PolarChartData.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(datum: PolarRoseRowDatum): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `datum` | `PolarRoseRowDatum` | Required |

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

- [PolarRoseRowDatum](https://chart.syidax.com/docs/types/PolarRoseRowDatum.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(datums: ReadonlyArray<PolarRoseRowDatum>): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `datums` | `ReadonlyArray<PolarRoseRowDatum>` | Required |

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

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

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

### shift

Drop the oldest streamed categories (the `data` boxes are not the stream).

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

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

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(datums: ReadonlyArray<PolarRoseRowDatum>): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `datums` | `ReadonlyArray<PolarRoseRowDatum>` | Required |

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

- [PolarRoseRowDatum](https://chart.syidax.com/docs/types/PolarRoseRowDatum.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<PolarChartStreamSource | undefined>
```

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

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

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

### getEngineStatus

The requested engine, the engine that draws and why . A Chart Pro license decision names `chart.webgpu` and its state; renderer causes (not in this build, no WebGPU, a failed GPU) stay apart.

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

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

### setAnimation

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

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

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

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

- [PolarChartEasing](https://chart.syidax.com/docs/types/PolarChartEasing.md) — Type definition
- [PolarChartAnimationType](https://chart.syidax.com/docs/types/PolarChartAnimationType.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 radial-grow reveal. No-op when animation is off.

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

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

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

### hitTestSegment

Polar-only — hit-test the rose segment at canvas-relative coordinates.

```typescript
hitTestSegment(cssX: number, cssY: number): Promise<PolarChartPointEventDetail | null>
```

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

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

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

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

### showTooltipAtSegment

Polar-only — programmatic tooltip open on a (direction, series) cell.

```typescript
showTooltipAtSegment(categoryIndex: number, seriesIdOrIndex: string | number): Promise<PolarChartPointEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `categoryIndex` | `number` | Required |
| `seriesIdOrIndex` | `string \| number` | Required |

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

- [PolarChartPointEventDetail](https://chart.syidax.com/docs/types/PolarChartPointEventDetail.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-zoomTo"></a>

### zoomTo

Zoom to explicit windows of the drawing (`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 drawing (`{ 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