Gauge

value

The current measurement.

min

The start of the measurement range.

max

The end of the measurement range.

needles

Multi-needle override (dial variant). When set + non-empty, drives the dial instead of value.

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

• GaugeNeedleSpec

  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.

variant

The gauge style, such as solid or dial.

• GaugeChartVariant

  Type definition

startAngle

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

endAngle

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

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.

innerRadius

Solid-variant inner radius. Number = px; '%' = fraction of outerRadius.

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

thickness

Band / solid-ring thickness in px. Wins over innerRadius for the solid variant.

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

rings

Activity-variant rings (property-only). Each ring has its OWN value/max (Move 500 kcal, Exercise 30 min…). Absent → the variant falls back to needles (shared chart max) or the scalar value (one ring).

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

• GaugeActivityRingSpec

  Type definition

time

Clock-variant time. 'now'/unset keeps the face ticking live (1 s interval, cleaned up on disconnect); 'HH:MM'/'HH:MM:SS' freezes it.

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

showSeconds

Clock-variant second hand (thin, red).

color

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

colors

Needle palette (multi-needle). Per-needle color always wins.

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

stops

Solid-variant colour stops (0..1 along min..max). Progress colour interpolates between them.

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

• GaugeColorStop

  Type definition

needleShape

Allowed values: needle, arrow, line, wedge. Default: 'needle'.

• GaugeNeedleShape

  Type definition

needleLength

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

needleRearLength

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

needleWidth

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

pivotRadius

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

pivotColor

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

plotBands

Coloured zones — an array, or 'auto' to split the axis by % of max.

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

• GaugePlotBand

  Type definition

bandThickness

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

bandTrackColor

The 'empty' track behind plot bands — the un-zoned part of the axis.

rounded

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

trackColor

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

showTicks

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

tickInterval

Allowed values: auto. Default: 'auto'.

minorTicks

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

tickLength

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

minorTickLength

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

tickWidth

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

minorTickWidth

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

tickColor

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

showTickLabels

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

tickLabelDistance

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

tickLabelColor

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

tickLabelFontSize

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

tickLabelFormat

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.

showValue

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

valueDisplay

Print the raw value or its percent of the axis (gauges use both).

• GaugeValueDisplay

  Type definition

valueFormat

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.

valueColor

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

valueFontSize

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

unit

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.

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.

tooltipShow

Whether to display the built-in tooltip.

tooltipFormat

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

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

• GaugeChartPointerEventDetail

  Type definition

enableMouseTracking

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

tooltip

Rich tooltip configuration object — the dial-flavoured counterpart to the cartesian / pie .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.

• GaugeChartTooltipInput

  Type definition

legend

Whether to show a legend for series or items.

legendPosition

Where the legend is positioned.

• GaugeChartLegendPosition

  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

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, analog. Default: 'analog'.

• GaugeChartEasing

  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.

• GaugeChartAnimationType

  Type definition

analogDamping

analog damping (1..n) for long sweeps — LOWER = bigger overshoot + more wobbles, higher = calmer. Short updates are auto-damped calmer.

analogFrequency

analog swing frequency (1..n) — higher = more wobbles packed into the settle.

analogOvershootAngle

How far past the scale ends the needle may overshoot, in degrees (visible at min/max).

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.

• GaugeChartStreamSource

  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.

• GaugeChartEngineMode

  Type definition

proThreshold

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

unavailable

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

• GaugeChartUnavailableBehaviour

  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<GaugeChartRenderResult & { tier: GaugeChartEngineTier }>.

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

• GaugeChartRenderResult

  Type definition

• GaugeChartEngineTier

  Type definition

gaugeClick

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

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

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

• GaugeChartPointerEventDetail

  Type definition

gaugeHover

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

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

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

• GaugeChartPointerEventDetail

  Type definition

pointContextMenu

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

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

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

• ChartPointContextMenuEventDetail

  Type definition

• GaugeChartPointerEventDetail

  Type definition

valueChange

CustomEvent.detail type: { value: number; fraction: number }. Event names are case-sensitive.

Event name: valueChange. Names are case-sensitive. Read the payload from detail on CustomEvent<{ value: number; fraction: number }>.

chart.addEventListener('valueChange', event => {
  console.log(event.detail); // { value: number; fraction: number }
});

legendItemClick

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

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

needleToggled

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

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

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

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

• GaugeChartTooltipShowEventDetail

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

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

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

• GaugeChartTooltipActionEventDetail

  Type definition

redraw

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

redraw(): Promise<GaugeChartRenderResult>

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

• GaugeChartRenderResult

  Type definition

getActiveTier

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

getActiveTier(): Promise<GaugeChartEngineTier>

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

• GaugeChartEngineTier

  Type definition

getValue

The dB value of a cell (null when empty or outside the grid).

getValue(): Promise<number>

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

setValue

Set the primary value (animates when animated).

setValue(value: number): Promise<void>

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

addNeedle

Gauge-only — add a needle (dial variant).

addNeedle(needle: GaugeNeedleSpec, opts?: { insertAt?: number }): Promise<number>

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

• GaugeNeedleSpec

  Type definition

removeNeedle

Gauge-only — remove a needle by id or index.

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

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

setRings

Replace the activity ring set (animates per ring when animated).

setRings(rings: GaugeActivityRingSpec[]): Promise<void>

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

• GaugeActivityRingSpec

  Type definition

setRingValue

Update ONE activity ring's value by id, name, or index (animates when animated).

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

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

updateNeedle

Gauge-only — patch a needle.

updateNeedle(idOrIndex: string | number, patch: Partial<GaugeNeedleSpec>): Promise<boolean>

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

• GaugeNeedleSpec

  Type definition

appendPoint

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

appendPoint(value: number): Promise<void>

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

appendBatch

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

appendBatch(values: ReadonlyArray<number>): Promise<void>

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

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(values: ReadonlyArray<number>): Promise<void>

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

getStreamSource

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

getStreamSource(): Promise<GaugeChartStreamSource | undefined>

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

• GaugeChartStreamSource

  Type definition

setAnimation

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

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

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

• GaugeChartEasing

  Type definition

• GaugeChartAnimationType

  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<GaugeChartPointerEventDetail | null>

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

• GaugeChartPointerEventDetail

  Type definition

showTooltip

Open the value tooltip programmatically at the primary value (needle 0, or the scalar value). Anchors on the dial along the value's angle.

showTooltip(): Promise<GaugeChartPointerEventDetail | null>

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

• GaugeChartPointerEventDetail

  Type definition

showTooltipAtValue

Gauge analogue of pie's showTooltipAtSlice — compute the pointer detail at value's angle on the dial and open the tooltip there.

showTooltipAtValue(value: number): Promise<GaugeChartPointerEventDetail | null>

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

• GaugeChartPointerEventDetail

  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