Density Map

data

An array of { x, y, weight? }.

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

• DensityMapInput

  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.

xMin

Explicit domain ends (an omitted end follows the point extent padded by padding; x-axis / y-axis min / max also set them).

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

xMax

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.

yMin

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.

yMax

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.

padding

The fraction of the span padded on each automatic domain end.

cellSize

CSS px per estimate cell (the grid follows the plot size); columns / rows override it.

columns

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.

rows

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.

bandwidth

The range over which the kernel is applied.

• DensityMapBandwidthInput

  Type definition

bandwidthUnit

data (default) — the bandwidth is in data units; px — in CSS px of the plot.

• DensityMapBandwidthUnit

  Type definition

kernel

The kernel used for density estimation.

• DensityMapKernel

  Type definition

threshold

Cells under this fraction of the peak density are empty (the background shows through).

computePath

where the estimate runs: auto (the GPU compute once the renderer is up, else the CPU), cpu, gpu.

• DensityMapComputePathInput

  Type definition

colors

The colour ramp over the density domain (a scheme name, a colour list / comma list, or [t, colour] stops).

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

valueMin

Density domain ends; an omitted end follows 0 … the peak.

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

valueMax

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.

emptyColor

The colour of an empty (under-threshold) cell — transparent by default.

lod

The plane's level of detail: smooth (bilinear between cell centres — the default here), auto, point, area.

• DensityMapLodMode

  Type definition

fade

the fade band above the threshold cut, as a fraction of the peak (0 = a hard edge).

densityUnit

how densities read: the cell's mass (default) or mass per unit area of the data space.

• DensityMapUnitInput

  Type definition

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 default OFF (the plane tiles the plot).

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 x / y domains; the estimate is not re-run per gesture — the field's visible sub-rectangle is mapped onto the plot. 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

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 cell tooltip (the shared cartesian tooltip input: show / trigger / format / html / connector / draggable …).

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

a plain-text formatter of the default tooltip (tooltip.format wins).

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

• DensityMapPointEventDetail

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

• DensityMapEasing

  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.

• DensityMapAnimationType

  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.

• DensityMapStreamSource

  Type definition

streamMax

Points the internal stream source tracks at most (the oldest drop first).

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 points that feed the estimate (the whole buffer when unset).

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

visualMap

A visual-map binding (a sy-visual-map snapshot + dimension); it overrides colors / value-min / value-max while bound.

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

• VisualMapBinding

  Type definition

engine

auto, standard and pro all run the one WebGPU renderer (a Pro-only type has no other); switching never tears it down.

• DensityMapEngineMode

  Type definition

unavailable

fallback shows the on-chart notice when the renderer cannot run; error throws.

• DensityMapUnavailableBehaviour

  Type definition

rendered

Every drawn frame; engine is the engine status (requested / effective / code / the governing license feature).

Event name: rendered. Names are case-sensitive. Read the payload from detail on CustomEvent<DensityMapRenderResult & { tier: DensityMapEngineTier; engine?: ChartEngineStatus }>.

chart.addEventListener('rendered', event => {
  console.log(event.detail); // DensityMapRenderResult & { tier: DensityMapEngineTier; engine?: ChartEngineStatus }
});

• DensityMapRenderResult

  Type definition

• DensityMapEngineTier

  Type definition

• ChartEngineStatus

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

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

• DensityMapPointEventDetail

  Type definition

pointHover

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

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

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

• DensityMapPointEventDetail

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

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

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

• ChartPointContextMenuEventDetail

  Type definition

• DensityMapPointEventDetail

  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

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

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

• DensityMapRenderResult

  Type definition

getActiveTier

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

getActiveTier(): Promise<DensityMapEngineTier>

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

• DensityMapEngineTier

  Type definition

getUnavailableReason

The reason the renderer cannot run (undefined while it runs).

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

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

• DensityMapInput

  Type definition

appendPoint

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

appendPoint(point: DensityMapPoint | DensityMapTuple): Promise<void>

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

• DensityMapPoint

  Type definition

• DensityMapTuple

  Type definition

appendBatch

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

appendBatch(points: ReadonlyArray<DensityMapPoint | DensityMapTuple>): Promise<void>

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

• DensityMapPoint

  Type definition

• DensityMapTuple

  Type definition

shift

(carry-over C9) — shift(n) drops the n oldest points of the cloud: the data prop's leading entries first (a plain cloud shifts too — before a shift without a stream was a no-op), then the streamed points through the stream source. Each part fires windowSlid with its own count.

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(points: ReadonlyArray<DensityMapPoint | DensityMapTuple>): Promise<void>

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

• DensityMapPoint

  Type definition

• DensityMapTuple

  Type definition

getStreamSource

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

getStreamSource(): Promise<DensityMapStreamSource | undefined>

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

• DensityMapStreamSource

  Type definition

setAnimation

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

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

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

• DensityMapEasing

  Type definition

• DensityMapAnimationType

  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 estimate cell under host-relative CSS coordinates, or null (the density waits for a pending readback).

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

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

• DensityMapPointEventDetail

  Type definition

getCellValue

The density of a cell in the public unit (null under the threshold or outside the grid).

getCellValue(col: number, row: number): Promise<number | null>

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

getDensityAt

The density at a data-space point in the public unit (null outside the domain or under the threshold).

getDensityAt(x: number, y: number): Promise<number | null>

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

getValueExtent

The density extent of the estimate in the public unit (min 0, max = the peak, finite = cells over the threshold).

getValueExtent(): Promise<DensityMapValueExtent | null>

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

• DensityMapValueExtent

  Type definition

showTooltipAtCell

open the tooltip on a cell (col / row), honouring the tooltip input; null when off or outside.

showTooltipAtCell(col: number, row: number): Promise<CartesianTooltipEventDetail | null>

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

• CartesianTooltipEventDetail

  Type definition

showTooltipAtIndex

open the tooltip on a cell by its index (row * columns + col; the facade's showTooltipAtPoint).

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.

focusCellAt

move the keyboard focus to a cell (the arrow-key state); null clears it.

focusCellAt(col: number, row: number): Promise<DensityMapPointEventDetail | null>

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

• DensityMapPointEventDetail

  Type definition

getGridSize

Columns × rows of the current grid.

getGridSize(): Promise<{ columns: number; rows: number; cells: number }>

Return type: Promise<{ columns: number; rows: number; cells: number }>. Call the method after element registration and await its Promise result.

getDomain

The data domain the grid spans.

getDomain(): Promise<DensityMapDomain>

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

• DensityMapDomain

  Type definition

getBandwidth

The resolved bandwidth (data units, CSS px, cells; auto when Silverman chose it).

getBandwidth(): Promise<DensityMapBandwidth>

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

• DensityMapBandwidth

  Type definition

getKernelTaps

the normalised kernel taps of the current estimate per axis (length 2 × radius + 1; they sum to 1).

getKernelTaps(): Promise<{ kernel: DensityMapKernel; x: number[]; y: number[]; radius: { x: number; y: number } }>

Return type: Promise<{ kernel: DensityMapKernel; x: number[]; y: number[]; radius: { x: number; y: number } }>. Call the method after element registration and await its Promise result.

• DensityMapKernel

  Type definition

getComputeStats

The statistics of the last estimate (points, grid, kernel, bandwidth, radius, compute time, peak, mass).

getComputeStats(): Promise<DensityMapComputeStats>

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

• DensityMapComputeStats

  Type definition

getPlaneValues

a copy of the current plane (NaN = empty; cell mass), whichever path computed it (waits for a pending readback).

getPlaneValues(): Promise<Float32Array>

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

computeReference

the CPU reference estimate for the current inputs (the parity oracle of the GPU path; never cached).

computeReference(): Promise<{ values: Float32Array; densityMax: number; mass: number; binned: number; finite: number; computeMs: number; radius: { x: number; y: number } }>

Return type: Promise<{ values: Float32Array; densityMax: number; mass: number; binned: number; finite: number; computeMs: number; radius: { x: number; y: number } }>. Call the method after element registration and await its Promise result.

setVisualMap

Bind (or clear with null) a visual-map snapshot; it wins over the visualMap prop until the prop changes again.

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 of a dimension: value = the density (0 … peak), x / y = the domain, index = the cell indexes.

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

zoomTo

Zoom to explicit windows in data units: 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 (the field's x / y domain).

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

Requested engine vs what runs, and why (CHART-ADD-08): the decision for the current inputs, read without side effects (ProChartLicense.engineStatus); a renderer that failed at run time reports engine-unsupported.

getEngineStatus(): Promise<ChartEngineStatus>

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

• ChartEngineStatus

  Type definition