Radar

data

Each series is { name, data, color? }.

• RadarChartData

  Type definition

categories

Metric names in the same order as data.

min

Together with max, defines the shared measurement range.

max

Allowed values: auto. Default: 'auto'.

tickInterval

Allowed values: auto. Default: 'auto'.

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.

variant

Allowed values: area, line. Default: 'line'.

• RadarChartVariant

  Type definition

startAngle

Angle of category 0 in DEGREES (0 = 12 o'clock, clockwise +).

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.

color

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

colors

Multi-series palette. Per-series color always wins.

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

lineWidth

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

fillOpacity

Area-variant fill alpha (0..1).

gridShape

Allowed values: circle, polygon. Default: 'polygon'.

• RadarGridShape

  Type definition

gridColor

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

showMarkers

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

markerRadius

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

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.

ringLabelFormat

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.

categoryLabelColor

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

categoryLabelFontSize

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

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.

tooltipShow

Whether to display the built-in tooltip.

tooltipFormat

Pass as a JavaScript property. type: (detail: RadarChartPointerEventDetail) => string.

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

• RadarChartPointerEventDetail

  Type definition

tooltip

Tooltip settings for pointer-driven values, position, and content.

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

• RadarChartTooltipInput

  Type definition

enableMouseTracking

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

crosshair

Crosshair guide — the SAME parameter names as the cartesian charts, read on the polar pane. Off by default. Accepts true / a partial spec { show, mode, snap, color, dash }. mode 'vertical' → the category axis guide = a radial spoke; mode 'horizontal' → the value axis guide = a concentric ring; mode 'cross' → both. snap 'nearest' snaps to the nearest vertex, 'index' to the nearest category, 'off' is the raw pointer. Objects can't ride an attribute — set it as a property (or via a <sy-chart> script).

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

• CartesianCrosshairInput

  Type definition

legend

Whether to show a legend for series or items.

legendPosition

Where the legend is positioned.

• RadarChartLegendPosition

  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

activeSeriesIndex

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.

seriesActiveTrigger

Allowed values: hover, click, custom. Default: 'click'.

• RadarChartSeriesActiveTrigger

  Type definition

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

• RadarChartEasing

  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.

• RadarChartAnimationType

  Type definition

editable

Enables direct pointer editing of point values.

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.

• RadarChartStreamSource

  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.

engine

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

• RadarChartEngineMode

  Type definition

proThreshold

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

unavailable

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

• RadarChartUnavailableBehaviour

  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<RadarChartRenderResult & { tier: RadarChartEngineTier }>.

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

• RadarChartRenderResult

  Type definition

• RadarChartEngineTier

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

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

• RadarChartPointerEventDetail

  Type definition

pointHover

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

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

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

• RadarChartPointerEventDetail

  Type definition

crosshairMove

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

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

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

• CartesianCrosshairEventDetail

  Type definition

pointContextMenu

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

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

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

• ChartPointContextMenuEventDetail

  Type definition

• RadarChartPointerEventDetail

  Type definition

pointChange

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

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

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

• RadarChartPointerEventDetail

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

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

• RadarChartTooltipShowEventDetail

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

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

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

• RadarChartTooltipActionEventDetail

  Type definition

redraw

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

redraw(): Promise<RadarChartRenderResult>

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

• RadarChartRenderResult

  Type definition

getActiveTier

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

getActiveTier(): Promise<RadarChartEngineTier>

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

• RadarChartEngineTier

  Type definition

setData

Replace the bar set.

setData(data: RadarChartData): Promise<void>

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

• RadarChartData

  Type definition

addSeries

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

addSeries(series: RadarChartData[number], opts?: { insertAt?: number }): Promise<number>

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

• RadarChartData

  Type definition

removeSeries

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

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

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

updateSeries

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

updateSeries(idOrIndex: string | number, patch: Partial<RadarChartData[number]>): Promise<boolean>

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

• RadarChartData

  Type definition

updatePoint

Radar-only — patch one category value in a series.

updatePoint(seriesIdOrIndex: string | number, categoryIdOrIndex: string | number, value: number | null): 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(frame: RadarStreamFrame): Promise<void>

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

• RadarStreamFrame

  Type definition

appendBatch

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

appendBatch(frames: ReadonlyArray<RadarStreamFrame>): Promise<void>

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

• RadarStreamFrame

  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(frames: ReadonlyArray<RadarStreamFrame>): Promise<void>

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

• RadarStreamFrame

  Type definition

getStreamSource

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

getStreamSource(): Promise<RadarChartStreamSource | undefined>

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

• RadarChartStreamSource

  Type definition

setAnimation

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

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

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

• RadarChartEasing

  Type definition

• RadarChartAnimationType

  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 min → value(s). No-op when animation is off / reduced.

replayAnimation(): Promise<void>

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

hitTest

The box under a host-local CSS point (the nearest slot, within half a pitch), or null.

hitTest(cssX: number, cssY: number): Promise<RadarChartPointerEventDetail | null>

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

• RadarChartPointerEventDetail

  Type definition

showTooltipAt

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

showTooltipAt(seriesIndex: number, categoryIndex: number): Promise<RadarChartPointerEventDetail | null>

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

• RadarChartPointerEventDetail

  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