Bubble

data

An array of { x, y, z, name? }. x and y determine position; z determines size.

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

• BubbleData

  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.

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.

• XAxisInput

  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.

• YAxisInput

  Type definition

gridLines

Grid lines: both axes on by default.

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

• CartesianGridLinesInput

  Type definition

crosshair

Crosshair that follows the cursor across the plot.

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

• CartesianCrosshairInput

  Type definition

zoom

Zoom (Storybook parity, 2026-09-10): 'x' | 'y' | 'xy' | true (x) enable the drag rectangle, the pan, the Ctrl + wheel, the pinch and the keyboard (+ / - / Escape) on the primary axes; an object refines mode / drag / keyboard / minRangePx / resetButton / pan / wheel / pinch / inside. Off by default; the methods (zoomTo / zoomBy / panBy / resetZoom) work regardless of the gesture switches.

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

• CartesianZoomInput

  Type definition

padding

The automatic domain pads each span by this share (default 5 %).

color

The bubble colour: the border, and the fill at fill-alpha.

fillAlpha

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

borderColor

The border colour (auto = the bubble colour) and its thickness in CSS px (0 = none).

borderWidth

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

activeColor

The accent fill of the hovered / focused bubble.

minRadius

The radius range in CSS px the z range maps onto.

maxRadius

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

sizeScale

area (the disc area proportional to z; the default) or radius.

• BubbleSizeScale

  Type definition

zMin

The z range (the data's when unset): z at or below z-min takes the min radius, at or above z-max the max.

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

zMax

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.

layout

xy places the bubbles on the two axes; pack packs them into a cluster centred on the plot (the axes hidden).

• BubbleLayoutMode

  Type definition

packPadding

Pack mode: the gap between tangent bubbles in CSS px; contain only shrinks the cluster to fit, fill scales it to touch the shorter side.

packFit

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

• BubblePackFit

  Type definition

visualMap

a visual-map binding (a sy-visual-map snapshot + dimension: value / z colour by z, x, y, index) filling every bubble through its ramp; a datum's own color wins.

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

• VisualMapBinding

  Type definition

shading

flat (the default) or sphere (a highlight towards the top-left and a darker rim — the three-dimensional cue) with its strength 0 … 1.

• BubbleShading

  Type definition

shadeStrength

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.

enableMouseTracking

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

tooltip

The bubble tooltip (the shared cartesian tooltip input: trigger, format, html, connector …), its switch, a formatter of the default text.

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

• CartesianTooltipInput

  Type definition

tooltipEnabled

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

tooltipFormat

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

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

• BubblePointEventDetail

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

• BubbleEasing

  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.

• BubbleAnimationType

  Type definition

streamSource

§3.6: an external stream source (bubbles append); without one the chart keeps its own on the first push. Chart Pro (chart.streaming): ignored without it.

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

• BubbleStreamSource

  Type definition

streamMax

Bubbles tracked by the internal stream at most (the oldest leave as windowSlid). Chart Pro (chart.streaming).

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

streamWindow

The newest N streamed bubbles the chart renders (the whole buffer when unset). Chart Pro (chart.streaming).

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

engine

auto (the Standard renderer below pro-threshold bubbles, the WebGPU renderer from there with Chart Pro), standard or pro.

• BubbleEngineMode

  Type definition

proThreshold

auto switches to the WebGPU renderer at this many bubbles (a missing or non-positive value uses 50,000).

unavailable

fallback (the Standard renderer and the notice) or error (an explicit engine="pro" that cannot run throws).

• BubbleUnavailableBehaviour

  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<BubbleRenderResult & { tier: BubbleEngineTier }>.

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

• BubbleRenderResult

  Type definition

• BubbleEngineTier

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

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

• BubblePointEventDetail

  Type definition

pointHover

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

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

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

• BubblePointEventDetail

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

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

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

• ChartPointContextMenuEventDetail

  Type definition

• BubblePointEventDetail

  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 }
});

tooltipShow

The shared tooltip events (the controller emits them).

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

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
});

zoomChange

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

getDataTable

Current normalized table, including the retained stream; independent of GPU availability.

getDataTable(): Promise<ChartDataTable>

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

• ChartDataTable

  Type definition

redraw

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

redraw(): Promise<BubbleRenderResult>

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

• BubbleRenderResult

  Type definition

getActiveTier

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

getActiveTier(): Promise<BubbleEngineTier>

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

• BubbleEngineTier

  Type definition

getUnavailableReason

Why the WebGPU renderer could not run (the fallback notice's reason); undefined when nothing fell back.

getUnavailableReason(): Promise<string | undefined>

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

setData

Replace the bar set.

setData(data: BubbleData): Promise<void>

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

• BubbleData

  Type definition

appendPoint

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

appendPoint(datum: BubbleDatumInput): Promise<void>

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

• BubbleDatumInput

  Type definition

appendBatch

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

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

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

• BubbleDatumInput

  Type definition

shift

Drop the oldest streamed bubbles (the data bubbles are not the stream); with nothing streamed it does nothing and asks nothing.

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

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

• BubbleDatumInput

  Type definition

getStreamSource

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

getStreamSource(): Promise<BubbleStreamSource | undefined>

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

• BubbleStreamSource

  Type definition

setAnimation

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

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

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

• BubbleEasing

  Type definition

• BubbleAnimationType

  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 bubble under a host-local CSS point (the smallest disc containing it), or null.

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

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

• BubblePointEventDetail

  Type definition

getPoint

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

getPoint(index: number): Promise<BubblePoint | null>

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

• BubblePoint

  Type definition

getPointCount

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

getPointCount(): Promise<number>

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

getPoints

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

getPoints(): Promise<BubblePoint[]>

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

• BubblePoint

  Type definition

getExtent

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

getExtent(): Promise<BubbleExtent>

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

• BubbleExtent

  Type definition

getDomain

The data domain the grid spans.

getDomain(): Promise<BubbleDomain>

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

• BubbleDomain

  Type definition

getRadiusScale

The z → radius mapping the chart resolved (the z range, the radius range in CSS px, the scale).

getRadiusScale(): Promise<BubbleRadiusScale>

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

• BubbleRadiusScale

  Type definition

getPackLayout

the packed cluster in plot CSS px (null in xy mode): the scale applied to the radii, the enclosing circle, one circle per bubble.

getPackLayout(): Promise<BubblePackLayout | null>

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

• BubblePackLayout

  Type definition

setVisualMap

Bind (or clear) a visual map: every bubble is filled through it on the next frame (a datum's own colour still wins).

setVisualMap(binding: VisualMapBinding | null): Promise<VisualMapBinding | null>

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

• VisualMapBinding

  Type definition

getVisualMap

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

getVisualMap(): Promise<VisualMapBinding | null>

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

• VisualMapBinding

  Type definition

getVisualExtent

The extent a bound sy-visual-map adopts as its domain: z (value / z), x, y, or the index range.

getVisualExtent(request?: VisualMapExtentRequest): Promise<VisualMapExtent | null>

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

• VisualMapExtent

  Type definition

• VisualMapExtentRequest

  Type definition

showTooltipAtIndex

Open the tooltip on a bubble (the facade's showTooltipAtPoint routes here); null off the bubbles or with the tooltip off.

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

focusPointAt

Move the keyboard focus ring to a bubble (null off the bubbles); emits pointHover like the walk.

focusPointAt(index: number): Promise<BubblePointEventDetail | null>

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

• BubblePointEventDetail

  Type definition

zoomTo

Zoom to explicit windows: x / y as { min, max } or [min, max] (null clears that orientation); xAxis / yAxis name the axis by id or slot index (default: the primary axis).

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 data units ({ 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 (and key) of the primary — or the named — master axes (pack mode: the unit square).

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

getEngineStatus

The requested engine, the engine that draws and why — the last engine decision. A Chart Pro license decision names chart.webgpu and its state; renderer causes (not in this build, no WebGPU, a failed GPU) stay apart and never list an entitlement.

getEngineStatus(): Promise<ChartEngineStatus>

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

• ChartEngineStatus

  Type definition