Pie

values

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

• PieChartValues

  Type definition

width

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

height

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

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.

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

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.

palette

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

• PieChartPaletteName

  Type definition

colors

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

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

borderColor

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

borderWidth

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

slicedOffset

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

innerSize

The donut's inner radius ratio.

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

size

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

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

centerX

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

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

centerY

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

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

minSize

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

thickness

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

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

startAngle

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

endAngle

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

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.

sizeBy

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

• PieChartSizeBy

  Type definition

zMin

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

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

zMax

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

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

minPointSize

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

maxPointSize

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

centerText

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

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

centerSubtext

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

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

chartTitle

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

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

chartSubtitle

The subtitle inside the chart.

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

legend

Whether to show a legend for series or items.

legendPosition

Where the legend is positioned.

• PieChartLegendPosition

  Type definition

legendItems

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

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

• LegendItem

  Type definition

labelsMode

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

• PieChartLabelMode

  Type definition

labelsContent

Choose names, values, or percentages for labels.

• PieChartLabelContent

  Type definition

labelsDistance

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

labelsFontSize

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

labelsFontWeight

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

labelsColor

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

labelsMinSweep

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

labelsConnector

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

labelsConnectorColor

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

labelsConnectorWidth

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

labelsConnectorPadding

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

labelsConnectorShape

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

labelsAllowOverlap

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

tooltipShow

Whether to display the built-in tooltip.

tooltipFormat

Pass as a JavaScript property. type: (slice: PieChartResolvedSlice) => string.

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

• PieChartResolvedSlice

  Type definition

enableMouseTracking

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

stickyTracking

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

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.

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

• PieChartTooltipInput

  Type definition

allowSelect

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

inactiveOtherSlices

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

inactiveSliceOpacity

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

activeSliceIndex

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

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

engine

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

• PieChartEngineMode

  Type definition

proThreshold

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

unavailable

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

• PieChartUnavailableBehaviour

  Type definition

streamSource

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

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

• PieChartStreamSource

  Type definition

streamWindow

The streaming data range to keep visible.

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

streamMax

The maximum number of streaming data points to retain.

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

animated

Whether to animate initial display and data changes.

animationDuration

Animation duration in milliseconds.

animationEasing

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

• PieChartEasing

  Type definition

animationType

Allowed values: initial, update. Default: undefined.

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

• PieChartAnimationType

  Type definition

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 }>.

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

• PieChartRenderResult

  Type definition

• PieChartEngineTier

  Type definition

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

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

• PieChartSliceEventDetail

  Type definition

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

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

• PieChartSliceEventDetail

  Type definition

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

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

• ChartPointContextMenuEventDetail

  Type definition

• PieChartSliceEventDetail

  Type definition

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

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

• PieChartSelectedEventDetail

  Type definition

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 }>.

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

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 }>.

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

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 }>.

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

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 }>.

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

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

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

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

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

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

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

tooltipShow

Whether to display the built-in tooltip.

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

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

• PieChartTooltipShowEventDetail

  Type definition

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

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

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

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

• PieChartTooltipActionEventDetail

  Type definition

redraw

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

redraw(): Promise<PieChartRenderResult>

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

• PieChartRenderResult

  Type definition

getActiveTier

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

getActiveTier(): Promise<PieChartEngineTier>

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

• PieChartEngineTier

  Type definition

addSlice

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

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

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

• PieChartDatum

  Type definition

removeSlice

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

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

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

updateSlice

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

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

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

• PieChartDatum

  Type definition

setSliceData

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

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

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

appendPoint

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

appendPoint(datum: PieChartDatum): Promise<void>

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

• PieChartDatum

  Type definition

appendBatch

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

appendBatch(datums: ReadonlyArray<PieChartDatum>): Promise<void>

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

• PieChartDatum

  Type definition

shift

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

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

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

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).

replace(datums: ReadonlyArray<PieChartDatum>): Promise<void>

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

• PieChartDatum

  Type definition

getStreamSource

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

getStreamSource(): Promise<PieChartStreamSource | undefined>

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

• PieChartStreamSource

  Type definition

setAnimation

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

setAnimation(options: { duration?: number; easing?: PieChartEasing; enabled?: boolean; type?: PieChartAnimationType }): Promise<void>

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

• PieChartEasing

  Type definition

• PieChartAnimationType

  Type definition

pauseAnimation

Pause the current animation.

pauseAnimation(): Promise<void>

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

resumeAnimation

Resume a paused animation.

resumeAnimation(): Promise<void>

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

replayAnimation

Replay the initial sweep-from-zero reveal. No-op when animation is off.

replayAnimation(): Promise<void>

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

selectSlice

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

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

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

deselectSlice

Pie-only — clear selection on a slice.

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

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

getSelectedSlices

Pie-only — read the current selection set.

getSelectedSlices(): Promise<string[]>

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

hitTestSlice

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

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

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

showTooltipAtSlice

Pie-only — programmatic tooltip open.

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

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

• PieChartSliceEventDetail

  Type definition

hideTooltip

Close the currently visible tooltip.

hideTooltip(): Promise<void>

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

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.

getEngineStatus(): Promise<ChartEngineStatus>

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

• ChartEngineStatus

  Type definition