Dendrogram

data

An array of { id, label?, children? } or nodes linked by parent.

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

• DendrogramData

  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.

padding

Outer layout padding in CSS pixels; leaf slots are equally spaced.

nodeRadius

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

linkWidth

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

linkOpacity

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

direction

The tree's growth direction.

• DendrogramDirection

  Type definition

drilldown

Enable branch navigation, breadcrumb controls and Alt+Enter / Backspace shortcuts.

color

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

activeColor

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

nodeLabels

Allowed values: auto, show, hide. Default: 'auto'.

• DendrogramLabelMode

  Type definition

nodeLabelValue

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

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

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

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

• CartesianTooltipInput

  Type definition

tooltipEnabled

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

tooltipFormat

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

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

• DendrogramHitDetail

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

• DendrogramEasing

  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.

• DendrogramAnimationType

  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.

• DendrogramStreamSource

  Type definition

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.

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.

zoom

Settings for zooming and the visible range.

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

• CartesianZoomInput

  Type definition

engine

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

• DendrogramEngineMode

  Type definition

unavailable

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

• DendrogramUnavailableBehaviour

  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<DendrogramRenderResult & { tier: DendrogramEngineTier }>.

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

• DendrogramRenderResult

  Type definition

• DendrogramEngineTier

  Type definition

nodeClick

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

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

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

• DendrogramHitDetail

  Type definition

nodeHover

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

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

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

• DendrogramHitDetail

  Type definition

linkClick

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

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

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

• DendrogramHitDetail

  Type definition

linkHover

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

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

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

• DendrogramHitDetail

  Type definition

selectionChanged

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

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

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

• DendrogramSelectionChangeEventDetail

  Type definition

pointContextMenu

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

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

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

• ChartPointContextMenuEventDetail

  Type definition

• DendrogramHitDetail

  Type definition

appended

CustomEvent.detail type: { count: number; replaced: number }. Event names are case-sensitive.

Event name: appended. Names are case-sensitive. Read the payload from detail on CustomEvent<{ count: number; replaced: number }>.

chart.addEventListener('appended', event => {
  console.log(event.detail); // { count: number; replaced: 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

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

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

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

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

drillChange

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

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

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

• DendrogramDrillChangeEventDetail

  Type definition

redraw

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

redraw(): Promise<DendrogramRenderResult>

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

• DendrogramRenderResult

  Type definition

getActiveTier

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

getActiveTier(): Promise<DendrogramEngineTier>

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

• DendrogramEngineTier

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

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

• DendrogramData

  Type definition

getNodes

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

getNodes(): Promise<DendrogramNode[]>

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

• DendrogramNode

  Type definition

getLinks

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

getLinks(): Promise<DendrogramLink[]>

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

• DendrogramLink

  Type definition

getNode

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

getNode(index: number): Promise<DendrogramNode | null>

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

• DendrogramNode

  Type definition

getNodeById

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

getNodeById(id: string): Promise<DendrogramNode | null>

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

• DendrogramNode

  Type definition

getNodeCount

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

getNodeCount(): Promise<number>

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

getExtent

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

getExtent(): Promise<DendrogramExtent>

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

• DendrogramExtent

  Type definition

getLayout

The layout as shown (the frozen view while frozen); without a valid license it is refused and nothing is computed.

getLayout(): Promise<DendrogramLayoutResult>

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

• DendrogramLayoutResult

  Type definition

appendPoint

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

appendPoint(node: DendrogramNodeInput): Promise<void>

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

• DendrogramNodeInput

  Type definition

appendBatch

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

appendBatch(nodes: ReadonlyArray<DendrogramNodeInput>): Promise<void>

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

• DendrogramNodeInput

  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(nodes: ReadonlyArray<DendrogramNodeInput>): Promise<void>

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

• DendrogramNodeInput

  Type definition

getEngineStatus

Requested vs effective engine and why (CHART-ADD-08), with the chart.type.dendrogram license state.

getEngineStatus(): Promise<ChartEngineStatus>

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

• ChartEngineStatus

  Type definition

getStreamSource

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

getStreamSource(): Promise<DendrogramStreamSource | undefined>

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

• DendrogramStreamSource

  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.

setAnimation

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

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

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

• DendrogramEasing

  Type definition

• DendrogramAnimationType

  Type definition

hitTest

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

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

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

• DendrogramHitDetail

  Type definition

selectNodeAt

Select (pin) a node: its neighbourhood stays highlighted after the pointer leaves; a negative or unknown index releases the selection. Emits selectionChanged when it changes.

selectNodeAt(index: number): Promise<DendrogramHitDetail | null>

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

• DendrogramHitDetail

  Type definition

selectLinkAt

Select (pin) a link: its ribbon keeps the accent after the pointer leaves; a negative or unknown index releases the selection.

selectLinkAt(index: number): Promise<DendrogramHitDetail|null>

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

• DendrogramHitDetail

  Type definition

clearSelection

Release the selection (emits selectionChanged when there was one).

clearSelection(): Promise<void>

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

getSelection

The selection: the selected node's / link's detail (null = none); its anchors are Pro-derived, refused without a valid license.

getSelection(): Promise<DendrogramSelection>

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

• DendrogramSelection

  Type definition

drillTo

Enter a structural branch by stable ID; null returns to the complete forest. Requires drilldown.

drillTo(rootId: string | null): Promise<DendrogramDrillChangeEventDetail | null>

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

• DendrogramDrillChangeEventDetail

  Type definition

drillDown

Enter a structural branch by its normalized data index. Requires drilldown.

drillDown(nodeIndex: number): Promise<DendrogramDrillChangeEventDetail | null>

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

• DendrogramDrillChangeEventDetail

  Type definition

drillUp

Return to the current branch's parent, then the forest.

drillUp(): Promise<DendrogramDrillChangeEventDetail | null>

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

• DendrogramDrillChangeEventDetail

  Type definition

getDrillRoot

Treemap: current branch with its original identity and index, or null for the forest.

getDrillRoot(): Promise<DendrogramNode | null>

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

• DendrogramNode

  Type definition

showTooltipAtIndex

open the tooltip on a box (the facade's showTooltipAtPoint routes here); null off the boxes 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

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

showTooltipAtLink

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

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

zoomTo

Zoom to explicit windows over the unit extents: x / y as { min, max } or [min, max] (null clears that orientation).

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 unit-extent 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 (0 … 1) and key of the diagram's orientations (null before the first layout).

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

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

getLabels

The labels as shown (the frozen view while frozen); without a valid license they are refused and nothing is computed.

getLabels(): Promise<DendrogramLabel[]>

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

• DendrogramLabel

  Type definition