Polar

variant

Choose rose, bar, or line.

• PolarChartVariant

  Type definition

data

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

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

• PolarChartData

  Type definition

categories

Names for each direction or angle.

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

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

• PolarChartPaletteName

  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.

stacking

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

• PolarChartStackingMode

  Type definition

sectorPadding

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

barPadding

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

lineWidth

line: the stroke width in CSS px.

markerSize

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

fillOpacity

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

max

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

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.

gridColor

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

showRingLabels

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

ringLabelColor

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

ringLabelFontSize

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

categoryLabelColor

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

categoryLabelFontSize

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

legend

Whether to show a legend for series or items.

legendPosition

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

• PolarChartLegendPosition

  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

legendFloatAlign

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

legendFloatVerticalAlign

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

legendDraggable

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

tooltipShow

Whether to display the built-in tooltip.

tooltipFormat

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

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

• PolarRoseSegment

  Type definition

tooltip

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

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

• PolarChartTooltipInput

  Type definition

enableMouseTracking

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

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

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

• CartesianZoomInput

  Type definition

engine

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

• PolarChartEngineMode

  Type definition

unavailable

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

• PolarChartUnavailableBehaviour

  Type definition

proThreshold

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

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.

• PolarChartStreamSource

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

• PolarChartEasing

  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.

• PolarChartAnimationType

  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<PolarChartRenderResult & { tier: PolarChartEngineTier }>.

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

• PolarChartRenderResult

  Type definition

• PolarChartEngineTier

  Type definition

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

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

• PolarChartPointEventDetail

  Type definition

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

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

• PolarChartPointEventDetail

  Type definition

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

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

• ChartPointContextMenuEventDetail

  Type definition

• PolarChartPointEventDetail

  Type definition

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

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

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

chart.addEventListener('seriesToggled', event => {
  console.log(event.detail); // { index: number; seriesId: 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<PolarChartTooltipShowEventDetail>.

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

• PolarChartTooltipShowEventDetail

  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: PolarChartTooltipActionEventDetail. Event names are case-sensitive.

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

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

• PolarChartTooltipActionEventDetail

  Type definition

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

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

• CartesianZoomChangeEventDetail

  Type definition

redraw

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

redraw(): Promise<PolarChartRenderResult>

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

• PolarChartRenderResult

  Type definition

getActiveTier

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

getActiveTier(): Promise<PolarChartEngineTier>

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

• PolarChartEngineTier

  Type definition

getDataTable

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

getDataTable(): Promise<ChartDataTable>

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

• ChartDataTable

  Type definition

setData

Replace the bar set.

setData(data: PolarChartData): Promise<void>

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

• PolarChartData

  Type definition

appendPoint

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

appendPoint(datum: PolarRoseRowDatum): Promise<void>

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

• PolarRoseRowDatum

  Type definition

appendBatch

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

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

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

• PolarRoseRowDatum

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

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

• PolarRoseRowDatum

  Type definition

getStreamSource

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

getStreamSource(): Promise<PolarChartStreamSource | undefined>

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

• PolarChartStreamSource

  Type definition

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.

getEngineStatus(): Promise<ChartEngineStatus>

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

• ChartEngineStatus

  Type definition

setAnimation

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

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

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

• PolarChartEasing

  Type definition

• PolarChartAnimationType

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

hitTestSegment

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

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

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

• PolarChartPointEventDetail

  Type definition

showTooltipAtSegment

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

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

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

• PolarChartPointEventDetail

  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.

zoomTo

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

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

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

• CartesianZoomChangeEventDetail

  Type definition

• CartesianZoomRequest

  Type definition

zoomBy

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

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

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

• CartesianZoomChangeEventDetail

  Type definition

panBy

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

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

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

• CartesianZoomChangeEventDetail

  Type definition

resetZoom

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

resetZoom(): Promise<CartesianZoomChangeEventDetail | null>

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

• CartesianZoomChangeEventDetail

  Type definition

getZoom

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

getZoom(): Promise<CartesianZoomState | null>

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

• CartesianZoomState

  Type definition

getZoomExtent

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

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

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

• CartesianZoomExtentDetail

  Type definition

• CartesianZoomExtentRequest

  Type definition