Dumbbell

data

An array of { category, values: [low, high] }.

• DumbbellDatum

  Type definition

categories

Optional category-label override. When set, replaces the per-datum category labels.

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

groups

Names for the two endpoints.

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

lowName

Compatibility alias for groups[0].

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

highName

Compatibility alias for groups[1].

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.

color

Set endpoint colors as [first, second].

lineColor

Connector (bar) stroke colour — its own faint default, independent of the color pair.

lineWidth

Connector width in CSS px.

marker

Marker glyph. Polymorphic (like color): a single symbol applies to BOTH ends; an array or comma-string is read as [lowMarker, highMarker] (a single token leaves the low end on 'circle' and applies the token to the high end, mirroring the pair rule). Resolved once via resolvePair. Per-datum DumbbellDatum.lowMarker/highMarker override this for individual dumbbells.

• DumbbellMarkerSymbol

  Type definition

markerSize

Marker radius in CSS px.

sortDescending

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

valueAxisLabel

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.

xAxis

Configure the horizontal axis type, categories, range, and formatting. For a category axis, match the categories order to the value array indices. Charts supporting multiple axes can accept an axis array.

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

• CartesianAxisInput

  Type definition

yAxis

Configure the vertical axis range, ticks, labels, and direction. Use consistent units for comparisons, and consider a zero baseline when comparing bar lengths.

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

• CartesianAxisInput

  Type definition

gridLines

Allowed values: auto, off. Default: undefined.

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

• CartesianGridLinesInput

  Type definition

xLabelMode

How crowded category-axis labels are decluttered. Default 'auto' thins labels horizontally.

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

xLabelRotation

Explicit category-label rotation in degrees (respected as a floor).

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

xLabelMaxCount

Hard cap on the number of category labels shown.

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

crosshair

Crosshair that follows the cursor across the plot. true/'auto' enables a snapping line; pass an object to set mode/snap/color/dash.

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

• CartesianCrosshairInput

  Type definition

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

Show the low/high legend. When false no legend renders and its reserved space is reclaimed.

legendPosition

Edge the low/high legend attaches to. Default 'top'.

• DumbbellChartLegendPosition

  Type definition

tooltipEnabled

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

tooltipFormat

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

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

• DumbbellChartPointerEventDetail

  Type definition

tooltip

Rich tooltip configuration (matches the line/lollipop family). Pass an object to set show/mode/side/format/html/style/connector/draggable/interactive/trigger/openMode. The legacy tooltipEnabled/tooltipFormat props remain the fallback when tooltip is omitted. The hit is the dumbbell PAIR (low+high) under the cursor; the default text is category: low → high.

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

• CartesianTooltipInput

  Type definition

enableMouseTracking

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

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

• DumbbellChartEasing

  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.

• DumbbellChartAnimationType

  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.

• DumbbellChartStreamSource

  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.

• DumbbellChartEngineMode

  Type definition

proThreshold

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

unavailable

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

• DumbbellChartUnavailableBehaviour

  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<DumbbellChartRenderResult & { tier: DumbbellChartEngineTier }>.

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

• DumbbellChartRenderResult

  Type definition

• DumbbellChartEngineTier

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

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

• DumbbellChartPointerEventDetail

  Type definition

pointHover

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

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

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

• DumbbellChartPointerEventDetail

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

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

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

• ChartPointContextMenuEventDetail

  Type definition

• DumbbellChartPointerEventDetail

  Type definition

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

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

• CartesianTooltipEventDetail

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

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

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

• CartesianTooltipActionEventDetail

  Type definition

seriesOutsideClick

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

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

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

• CartesianSeriesOutsideClickEventDetail

  Type definition

legendItemClick

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

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

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

• DumbbellChartLegendItemEventDetail

  Type definition

seriesToggled

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

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

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

• DumbbellChartSeriesToggledEventDetail

  Type definition

redraw

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

redraw(): Promise<DumbbellChartRenderResult>

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

• DumbbellChartRenderResult

  Type definition

getActiveTier

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

getActiveTier(): Promise<DumbbellChartEngineTier>

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

• DumbbellChartEngineTier

  Type definition

setData

Replace the bar set.

setData(data: ReadonlyArray<DumbbellDatum>): Promise<void>

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

• DumbbellDatum

  Type definition

appendPoint

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

appendPoint(datum: DumbbellDatum): Promise<void>

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

• DumbbellDatum

  Type definition

appendBatch

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

appendBatch(data: ReadonlyArray<DumbbellPairDatum>): Promise<void>

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

• DumbbellPairDatum

  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(data: ReadonlyArray<DumbbellPairDatum>): Promise<void>

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

• DumbbellPairDatum

  Type definition

getStreamSource

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

getStreamSource(): Promise<DumbbellChartStreamSource | undefined>

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

• DumbbellChartStreamSource

  Type definition

showSeries

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

showSeries(idOrIndex: string | number, opts?: { redraw?: boolean }): Promise<boolean>

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

hideSeries

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

hideSeries(idOrIndex: string | number, opts?: { redraw?: boolean }): Promise<boolean>

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

setAnimation

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

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

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

• DumbbellChartEasing

  Type definition

• DumbbellChartAnimationType

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

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

• DumbbellChartPointerEventDetail

  Type definition

showTooltipAtPoint

Open the tooltip for a dot programmatically. pointIndex is the category (row) index; the optional seriesIndex selects a group within that row (defaults to the first visible group's dot in the row). Returns the emitted tooltip detail, or null when no dot resolves / the tooltip is disabled.

showTooltipAtPoint(index: number): Promise<CartesianTooltipEventDetail | null>

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

• CartesianTooltipEventDetail

  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