# Pie

Show the proportions that make up a whole.

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

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

## sy-pie-chart

Use when the total is meaningful and there are few categories.

Not suitable for negative values or overlapping categories. Use bars for precise comparisons between similar values.

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

| Input | Data description |
| --- | --- |
| `values` | An array of { name, value, color? }. Positive values determine the angles. |
| `innerSize` | The donut's inner radius ratio. |
| `labelsContent` | Choose names, values, or percentages for labels. |

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

  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-pie-chart",
      "props": {
        "engine": "standard",
        "values": [
          {
            "name": "Product A",
            "value": 42,
            "color": "#8263d9"
          },
          {
            "name": "Product B",
            "value": 28,
            "color": "#239c91"
          },
          {
            "name": "Product C",
            "value": 18,
            "color": "#e99954"
          },
          {
            "name": "Other",
            "value": 12,
            "color": "#d76c8f"
          }
        ],
        "legend": true,
        "labelsContent": "name-percent",
        "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', 'pie example chart');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('sliceClick', event.detail);
  };
  chart.addEventListener('sliceClick', 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('sliceClick', onEvent);
    container.replaceChildren();
  }
</script>
```

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

## Properties

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

### values

An array of { name, value, color? }. Positive values determine the angles.

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

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

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

<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 | `PieChartPaletteName` |
| Default | `'tableau10'` |
| Allowed values | `tableau10`, `tableau20`, `observable10`, `paired12`, `set3_12` |

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

### borderColor

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

| Item | Value |
| --- | --- |
| JavaScript property | `borderColor` |
| HTML attribute | `border-color` |
| Type | `string` |
| Default | `'#ffffff'` |

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

### borderWidth

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

| Item | Value |
| --- | --- |
| JavaScript property | `borderWidth` |
| HTML attribute | `border-width` |
| Type | `number` |
| Default | `1` |

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

### slicedOffset

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

| Item | Value |
| --- | --- |
| JavaScript property | `slicedOffset` |
| HTML attribute | `sliced-offset` |
| Type | `number` |
| Default | `10` |

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

### innerSize

The donut's inner radius ratio.

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

### size

Pass as a JavaScript property. type: number | string.

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

### centerX

Pass as a JavaScript property. type: number | string.

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

### centerY

Pass as a JavaScript property. type: number | string.

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

### minSize

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

| Item | Value |
| --- | --- |
| JavaScript property | `minSize` |
| HTML attribute | `min-size` |
| Type | `number` |
| Default | `80` |

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

### thickness

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

| Item | Value |
| --- | --- |
| JavaScript property | `thickness` |
| HTML attribute | `thickness` |
| 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-startAngle"></a>

### startAngle

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

| Item | Value |
| --- | --- |
| JavaScript property | `startAngle` |
| HTML attribute | `start-angle` |
| Type | `number` |
| Default | `0` |

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

### endAngle

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

| Item | Value |
| --- | --- |
| JavaScript property | `endAngle` |
| HTML attribute | `end-angle` |
| Type | `number` |
| Default | `360` |

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

### variableRadius

Variable-radius mode (Highcharts variablepie). Each datum's `z` maps to the slice's outer radius between `min-point-size` and `max-point-size` while `value` keeps owning the angular sweep. Data without any finite `z` renders as a uniform pie even when this is on.

| Item | Value |
| --- | --- |
| JavaScript property | `variableRadius` |
| HTML attribute | `variable-radius` |
| Type | `boolean` |
| Default | `false` |

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

### sizeBy

`'area'` (default) scales slice AREA linearly with z (radius ∝ √z̄); `'radius'` scales the radius linearly.

| Item | Value |
| --- | --- |
| JavaScript property | `sizeBy` |
| HTML attribute | `size-by` |
| Type | `PieChartSizeBy` |
| Default | `'area'` |
| Allowed values | `area`, `radius` |

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

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

### zMin

Lower z-domain bound. Defaults to the data minimum; smaller z clamp to the minimum radius.

| Item | Value |
| --- | --- |
| JavaScript property | `zMin` |
| HTML attribute | `z-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-zMax"></a>

### zMax

Upper z-domain bound. Defaults to the data maximum; larger z clamp to the maximum radius.

| Item | Value |
| --- | --- |
| JavaScript property | `zMax` |
| HTML attribute | `z-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-minPointSize"></a>

### minPointSize

Smallest slice outer DIAMETER — px number or `'%'` of the full outer diameter (Highcharts minPointSize).

| Item | Value |
| --- | --- |
| JavaScript property | `minPointSize` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `number \| string` |
| Default | `'10%'` |

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

### maxPointSize

Largest slice outer DIAMETER — px number or `'%'` of the full outer diameter (Highcharts maxPointSize).

| Item | Value |
| --- | --- |
| JavaScript property | `maxPointSize` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `number \| string` |
| Default | `'100%'` |

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

### centerText

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

| Item | Value |
| --- | --- |
| JavaScript property | `centerText` |
| HTML attribute | `center-text` |
| 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-centerSubtext"></a>

### centerSubtext

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

| Item | Value |
| --- | --- |
| JavaScript property | `centerSubtext` |
| HTML attribute | `center-subtext` |
| 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-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-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

Where the legend is positioned.

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

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

### labelsMode

Allowed values: none, auto, inside, outside. Default: 'none'.

| Item | Value |
| --- | --- |
| JavaScript property | `labelsMode` |
| HTML attribute | `labels-mode` |
| Type | `PieChartLabelMode` |
| Default | `'none'` |
| Allowed values | `none`, `auto`, `inside`, `outside` |

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

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

### labelsContent

Choose names, values, or percentages for labels.

| Item | Value |
| --- | --- |
| JavaScript property | `labelsContent` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `PieChartLabelContent` |
| Default | `'name-percent'` |
| Literals in the type | `percent`, `value`, `name`, `name-percent`, `name-value` |

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

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

### labelsDistance

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

| Item | Value |
| --- | --- |
| JavaScript property | `labelsDistance` |
| HTML attribute | `labels-distance` |
| Type | `number` |
| Default | `24` |

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

### labelsFontSize

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

| Item | Value |
| --- | --- |
| JavaScript property | `labelsFontSize` |
| HTML attribute | `labels-font-size` |
| Type | `number` |
| Default | `12` |

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

### labelsFontWeight

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

| Item | Value |
| --- | --- |
| JavaScript property | `labelsFontWeight` |
| HTML attribute | `labels-font-weight` |
| Type | `number` |
| Default | `500` |

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

### labelsColor

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

| Item | Value |
| --- | --- |
| JavaScript property | `labelsColor` |
| HTML attribute | `labels-color` |
| Type | `string` |
| Default | `'#1f2937'` |

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

### labelsMinSweep

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

| Item | Value |
| --- | --- |
| JavaScript property | `labelsMinSweep` |
| HTML attribute | `labels-min-sweep` |
| Type | `number` |
| Default | `0.02` |

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

### labelsConnector

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

| Item | Value |
| --- | --- |
| JavaScript property | `labelsConnector` |
| HTML attribute | `labels-connector` |
| Type | `boolean` |
| Default | `true` |

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

### labelsConnectorColor

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

| Item | Value |
| --- | --- |
| JavaScript property | `labelsConnectorColor` |
| HTML attribute | `labels-connector-color` |
| Type | `string` |
| Default | `'#9ca3af'` |

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

### labelsConnectorWidth

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

| Item | Value |
| --- | --- |
| JavaScript property | `labelsConnectorWidth` |
| HTML attribute | `labels-connector-width` |
| Type | `number` |
| Default | `1` |

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

### labelsConnectorPadding

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

| Item | Value |
| --- | --- |
| JavaScript property | `labelsConnectorPadding` |
| HTML attribute | `labels-connector-padding` |
| Type | `number` |
| Default | `5` |

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

### labelsConnectorShape

Allowed values: straight, crooked. Default: 'crooked'.

| Item | Value |
| --- | --- |
| JavaScript property | `labelsConnectorShape` |
| HTML attribute | `labels-connector-shape` |
| Type | `'crooked' \| 'straight'` |
| Default | `'crooked'` |
| Allowed values | `straight`, `crooked` |

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

### labelsAllowOverlap

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

| Item | Value |
| --- | --- |
| JavaScript property | `labelsAllowOverlap` |
| HTML attribute | `labels-allow-overlap` |
| 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: (slice: PieChartResolvedSlice) => string.

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

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

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

### stickyTracking

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

| Item | Value |
| --- | --- |
| JavaScript property | `stickyTracking` |
| HTML attribute | `sticky-tracking` |
| Type | `boolean` |
| Default | `false` |

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

### tooltip

Rich tooltip configuration object — the slice-flavoured counterpart to the cartesian `.tooltip` API. Enables `trigger` (hover/click/hover-click), `openMode` (single/multiple pinned), `connector`, `draggable`, `interactive` action buttons, custom `format`/`html`/`style`/`className`/`side` and fixed sizing. When set it takes precedence over the flat `tooltip-show` / `tooltipFormat` props (which stay for back-compat). Property-only — assign the object, not an attribute.

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

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

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

### allowSelect

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

| Item | Value |
| --- | --- |
| JavaScript property | `allowSelect` |
| HTML attribute | `allow-select` |
| Type | `boolean` |
| Default | `true` |

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

### inactiveOtherSlices

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

| Item | Value |
| --- | --- |
| JavaScript property | `inactiveOtherSlices` |
| HTML attribute | `inactive-other-slices` |
| Type | `boolean` |
| Default | `false` |

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

### inactiveSliceOpacity

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

| Item | Value |
| --- | --- |
| JavaScript property | `inactiveSliceOpacity` |
| HTML attribute | `inactive-slice-opacity` |
| Type | `number` |
| Default | `0.45` |

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

### activeSliceIndex

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

| Item | Value |
| --- | --- |
| JavaScript property | `activeSliceIndex` |
| HTML attribute | `active-slice-index` |
| 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-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 | `PieChartEngineMode` |
| Default | `'auto'` |
| Allowed values | `auto`, `standard`, `pro` |

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

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

### proThreshold

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

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

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

### unavailable

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

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

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

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

- [PieChartStreamSource](https://chart.syidax.com/docs/types/PieChartStreamSource.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 | `PieChartEasing` |
| Default | `'ease-out'` |
| Allowed values | `linear`, `ease-out`, `ease-in`, `ease-in-out` |

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

- [PieChartAnimationType](https://chart.syidax.com/docs/types/PieChartAnimationType.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<PieChartRenderResult & { tier: PieChartEngineTier }>`.

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

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

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

### sliceClick

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

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

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

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

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

### sliceHover

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

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

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

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

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

### pointContextMenu

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

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

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

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

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

### sliceSelected

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

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

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

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

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

### legendItemClick

CustomEvent.detail type: { index: number; sliceId: 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; sliceId: string; label: string; disabled: boolean }>`.

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

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

### sliceToggled

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

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

```javascript
chart.addEventListener('sliceToggled', event => {
  console.log(event.detail); // { index: number; sliceId: 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<PieChartTooltipShowEventDetail>`.

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

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

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

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

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

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

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

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

### getActiveTier

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

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

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

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

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

### addSlice

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

```typescript
addSlice(datum: PieChartDatum, opts?: { insertAt?: number }): Promise<number>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `datum` | `PieChartDatum` | Required |
| `opts` | `{ insertAt?: number }` | Optional |

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

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

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

### removeSlice

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

```typescript
removeSlice(idOrIndex: string | number): Promise<boolean>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `idOrIndex` | `string \| number` | Required |

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

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

### updateSlice

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

```typescript
updateSlice(idOrIndex: string | number, patch: Partial<Exclude<PieChartDatum, number>>): Promise<boolean>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `idOrIndex` | `string \| number` | Required |
| `patch` | `Partial<Exclude<PieChartDatum, number>>` | Required |

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

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

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

### setSliceData

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

```typescript
setSliceData(idOrIndex: string | number, value: number): Promise<boolean>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `idOrIndex` | `string \| number` | Required |
| `value` | `number` | Required |

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

<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: PieChartDatum): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `datum` | `PieChartDatum` | Required |

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

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

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

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

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

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

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

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

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

- [PieChartStreamSource](https://chart.syidax.com/docs/types/PieChartStreamSource.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?: PieChartEasing; enabled?: boolean; type?: PieChartAnimationType }): Promise<void>
```

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

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

- [PieChartEasing](https://chart.syidax.com/docs/types/PieChartEasing.md) — Type definition
- [PieChartAnimationType](https://chart.syidax.com/docs/types/PieChartAnimationType.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-zero 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-selectSlice"></a>

### selectSlice

Pie-only — select a slice by id or index.

```typescript
selectSlice(idOrIndex: string | number, selected?: boolean): Promise<boolean>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `idOrIndex` | `string \| number` | Required |
| `selected` | `boolean` | Optional |

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

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

### deselectSlice

Pie-only — clear selection on a slice.

```typescript
deselectSlice(idOrIndex: string | number): Promise<boolean>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `idOrIndex` | `string \| number` | Required |

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

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

### getSelectedSlices

Pie-only — read the current selection set.

```typescript
getSelectedSlices(): Promise<string[]>
```

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

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

### hitTestSlice

Pie-only — hit-test slice at canvas-relative coordinates.

```typescript
hitTestSlice(cssX: number, cssY: number): Promise<{ sliceIndex: number; sliceId: string } | null>
```

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

Return type: `Promise<{ sliceIndex: number; sliceId: string } | null>`. Call the method after element registration and await its Promise result.

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

### showTooltipAtSlice

Pie-only — programmatic tooltip open.

```typescript
showTooltipAtSlice(idOrIndex: string | number): Promise<PieChartSliceEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `idOrIndex` | `string \| number` | Required |

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

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

### getEngineStatus

Requested engine vs what runs, and why (CHART-ADD-08): always Standard (this type has no WebGPU renderer); read without side effects, never consults the license.

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