Interface: ChartInstance

Returns

void

clickNode()

clickNode(target, options?): boolean

Runs a click on a node: nodeClick plus the selection it would cause.

Parameters

target

NodeRef

options?

Returns

boolean

destroy()

destroy(): void

Returns

void

download()

download(options?): void

Parameters

options?

DownloadOptions

Returns

void

getImageDataURL()

getImageDataURL(options?): string

Parameters

options?

DownloadOptions

Returns

string

getOptions()

getOptions(): ChartOptions

Returns

ChartOptions

getSelection()

getSelection(): SelectedNode[]

Returns

SelectedNode[]

getState()

getState(): ChartState

Returns

ChartState

hideTooltip()

hideTooltip(): void

Returns

void

isZoomed()

isZoomed(): boolean

Returns

boolean

resetZoom()

resetZoom(options?): void

Parameters

options?

Returns

void

setSelection()

setSelection(targets, options?): void

Parameters

targets

NodeRef[]

options?

Returns

void

setState()

setState(state): Promise<void>

Parameters

state

ChartState

Returns

Promise<void>

showTooltip()

showTooltip(target): boolean

Everything the pointer does, addressed by datum. These are the interactions themselves, not fake events: they run the same code a real hover or click does, so the listeners fire — pass { silent: true } to keep them quiet, which is what an app driving the chart from its own state usually wants.

They render on the same schedule as the rest: await waitForUpdate() when the next line depends on the frame being on screen.

Parameters

target

NodeRef

Returns

boolean

update()

update(options): Promise<void>

Parameters

options

ChartOptions

Returns

Promise<void>

updateDelta()

updateDelta(patch): Promise<void>

Parameters

patch

animation?

{ duration?: number; enabled?: boolean; key?: string | ((datum, index) => unknown); updateDuration?: number; updateEnabled?: boolean; }

animation.duration?

number

Entrance animation duration, ms (600 by default).

animation.enabled?

boolean

animation.key?

string | ((datum, index) => unknown)

What makes a row the same row across an update: the name of a field, or a function over the row. Without it rows are matched by position, so a change in their number is drawn at once instead of flowing — with it, the rows that stayed flow to their new values while the ones that came and went grow and sink at the ends.

animation.updateDuration?

number

Update transition duration, ms; falls back to duration, and to 450 without it.

animation.updateEnabled?

boolean

The update transition on its own, and it wins wherever it was set: a chart asked to appear at once (enabled: false) and to move afterwards says so with updateEnabled: true. Without it the update follows enabled.

annotations?

AnnotationOptions[]

axes?

AxisOptions[] | { angle?: { gridLine?: { enabled?: boolean; lineDash?: number[]; opacity?: number; stroke?: string; width?: number; }; label?: { color?: string; enabled?: boolean; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; format?: string; formatter?: (params) => string; }; line?: { enabled?: boolean; lineDash?: number[]; stroke?: string; width?: number; }; title?: { color?: string; enabled?: boolean; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; text?: string; }; }; radius?: { gridLine?: { enabled?: boolean; lineDash?: number[]; opacity?: number; stroke?: string; width?: number; }; label?: { color?: string; enabled?: boolean; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; format?: string; formatter?: (params) => string; }; line?: { enabled?: boolean; lineDash?: number[]; stroke?: string; width?: number; }; max?: number; min?: number; nice?: boolean; ringCount?: number; title?: { color?: string; enabled?: boolean; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; text?: string; }; }; }

Axes of the chart: a list for a cartesian one, a pair — the categories around the rim and the values along the radius — for a polar one.

background?

{ enabled?: boolean; fill?: string; fillOpacity?: number; visible?: boolean; }

background.enabled?

boolean

background.fill?

string

background.fillOpacity?

number

background.visible?

boolean

container?

HTMLElement

contextMenu?

{ enabled?: boolean; extraItems?: ContextMenuItem[]; }

contextMenu.enabled?

boolean

contextMenu.extraItems?

ContextMenuItem[]

Extra items appended after the standard ones.

crosshair?

{ enabled?: boolean; label?: { enabled?: boolean; }; lineDash?: number[]; snap?: boolean; stroke?: string; strokeWidth?: number; }

crosshair.enabled?

boolean

crosshair.label?

{ enabled?: boolean; }

crosshair.label.enabled?

boolean

crosshair.lineDash?

number[]

crosshair.snap?

boolean

Snap to the nearest node (true by default).

crosshair.stroke?

string

crosshair.strokeWidth?

number

data?

Datum[]

fonts?

{ autoReload?: boolean; }

Handling of web fonts that are still loading when the chart draws.

fonts.autoReload?

boolean

Redraw the chart once a web font it uses has finished loading (on by default). Turning it off keeps the very first frame as the only one — the chart then draws with whatever face the browser has at that moment and never asks for the missing ones, since canvas text loads no fonts on its own.

gradientLegend?

{ enabled?: boolean; label?: { enabled?: boolean; format?: string; formatter?: (params) => string; }; position?: GradientLegendPosition; spacing?: number; thickness?: number; }

Color scale for colorField series (heatmap).

gradientLegend.enabled?

boolean

gradientLegend.label?

{ enabled?: boolean; format?: string; formatter?: (params) => string; }

Labels of the scale ends (enabled by default).

gradientLegend.label.enabled?

boolean

gradientLegend.label.format?

string

Serializable format string (',.2f', '.0%'); formatter wins over it.

gradientLegend.label.formatter?

(params) => string

Text of an end label (the raw value by default).

gradientLegend.position?

GradientLegendPosition

Side on which the scale is placed (right by default).

gradientLegend.spacing?

number

Spacing between the scale and the plot area (10 by default).

gradientLegend.thickness?

number

Thickness of the color bar (12 by default).

height?

number

highlight?

{ dimOpacity?: number; enabled?: boolean; }

highlight.dimOpacity?

number

Opacity of non-highlighted series (0..1, 0.8 by default).

highlight.enabled?

boolean

initialState?

{ hiddenSeries?: string[]; zoom?: { x?: ZoomWindow; y?: ZoomWindow; }; }

initialState.hiddenSeries?

string[]

legend?

{ avoidCaptions?: boolean; background?: { cornerRadius?: number; fill?: string; padding?: number | [number] | [number, number] | [number, number, number, number] | { bottom?: number; left?: number; right?: number; top?: number; }; shadow?: { blur?: number; color?: string; enabled?: boolean; offsetX?: number; offsetY?: number; }; stroke?: string; strokeWidth?: number; }; data?: LegendItemOptions[]; enabled?: boolean; floating?: boolean; item?: { gap?: number; hiddenOpacity?: number; label?: { color?: string; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; }; marker?: { cornerRadius?: number; lineDash?: number[]; path?: string; shape?: LegendMarkerShape; size?: number; stroke?: string; strokeWidth?: number; viewBox?: number; }; markerGap?: number; rowGap?: number; value?: { color?: string; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; }; valueGap?: number; }; maxHeight?: Length; maxRows?: number; maxWidth?: Length; offset?: { x?: number; y?: number; }; position?: LegendPlacement; reverse?: boolean; toggleSeries?: boolean; }

legend.avoidCaptions?

boolean

Floating only: make the title and subtitle flow around the legend box instead of running underneath it (true by default). Set to false to allow the overlap.

legend.background?

{ cornerRadius?: number; fill?: string; padding?: number | [number] | [number, number] | [number, number, number, number] | { bottom?: number; left?: number; right?: number; top?: number; }; shadow?: { blur?: number; color?: string; enabled?: boolean; offsetX?: number; offsetY?: number; }; stroke?: string; strokeWidth?: number; }

Panel behind the items.

legend.background.cornerRadius?

number

4 by default.

legend.background.fill?

string

legend.background.padding?

number | [number] | [number, number] | [number, number, number, number] | { bottom?: number; left?: number; right?: number; top?: number; }

Inner padding in any CSS-like shorthand — 8, [8, 12], [8, 12, 4, 0] or { top, right, bottom, left }. 8 by default when fill/stroke is set, otherwise 0.

legend.background.shadow?

{ blur?: number; color?: string; enabled?: boolean; offsetX?: number; offsetY?: number; }

Drop shadow under the panel; drawn only when the panel has a fill.

legend.background.shadow.blur?

number

Blur radius; 8 by default.

legend.background.shadow.color?

string

'rgba(0, 0, 0, 0.2)' by default.

legend.background.shadow.enabled?

boolean

legend.background.shadow.offsetX?

number

legend.background.shadow.offsetY?

number

2 by default.

legend.background.stroke?

string

legend.background.strokeWidth?

number

1 by default when stroke is set.

legend.data?

LegendItemOptions[]

Custom items; fully replaces the auto-derived series items.

legend.enabled?

boolean

legend.floating?

boolean

Overlay the whole chart area (CSS position:absolute style) instead of reserving space.

legend.item?

{ gap?: number; hiddenOpacity?: number; label?: { color?: string; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; }; marker?: { cornerRadius?: number; lineDash?: number[]; path?: string; shape?: LegendMarkerShape; size?: number; stroke?: string; strokeWidth?: number; viewBox?: number; }; markerGap?: number; rowGap?: number; value?: { color?: string; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; }; valueGap?: number; }

Styling shared by all items.

legend.item.gap?

number

Gap between neighbouring items in a row; 18 by default.

legend.item.hiddenOpacity?

number

Opacity of an item whose series is hidden; 0.4 by default.

legend.item.label?

{ color?: string; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; }

legend.item.label.color?

string

legend.item.label.fontFamily?

string

legend.item.label.fontSize?

number

legend.item.label.fontStyle?

legend.item.label.fontWeight?

legend.item.marker?

{ cornerRadius?: number; lineDash?: number[]; path?: string; shape?: LegendMarkerShape; size?: number; stroke?: string; strokeWidth?: number; viewBox?: number; }

Marker glyph shared by all items.

legend.item.marker.cornerRadius?

number

'square' only: corner rounding; 3 by default.

legend.item.marker.lineDash?

number[]

Dashes for a 'line' marker.

legend.item.marker.path?

string

Custom glyph as SVG path data — wins over shape. Coordinates are taken in a viewBox square and scaled to the marker size, so the same d fits any size.

legend.item.marker.shape?

LegendMarkerShape

'square' by default (a rounded square); 'line' draws a dash.

legend.item.marker.size?

number

Marker box side; 10 by default (a 'line' marker is drawn 1.8× wider).

legend.item.marker.stroke?

string

Outline colour; without it the glyph is filled only.

legend.item.marker.strokeWidth?

number

Outline width, and the thickness of a 'line' marker; 1 / theme width by default.

legend.item.marker.viewBox?

number

Side of the square the path coordinates live in; 24 by default.

legend.item.markerGap?

number

Gap between the marker and the label; 6 by default.

legend.item.rowGap?

number

Gap between rows; 8 by default.

legend.item.value?

{ color?: string; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; }

Font of the value text; falls back to the label font at the theme's muted colour.

legend.item.value.color?

string

legend.item.value.fontFamily?

string

legend.item.value.fontSize?

number

legend.item.value.fontStyle?

legend.item.value.fontWeight?

legend.item.valueGap?

number

Gap between the label and the value; 14 by default.

legend.maxHeight?

Length

Height the legend never goes past, in pixels or as a percentage of the room it was offered ('30%'): rows beyond it are paginated. On a horizontal legend this caps the rows per page along with maxRows, on a vertical one the items per page.

legend.maxRows?

number

Rows per page for a horizontal legend; 2 by default. A vertical one pages by height.

legend.maxWidth?

Length

Width the legend never goes past, in pixels or as a percentage of the room it was offered ('40%'). A vertical legend (left/right) is what this is usually for — it stops long names from eating the plot, and a label that no longer fits is cut with an ellipsis. A horizontal one wraps within it instead.

legend.offset?

{ x?: number; y?: number; }

Floating only: inset from the anchored edges; along a centered axis — a shift right/down.

legend.offset.x?

number

legend.offset.y?

number

legend.position?

LegendPlacement

The docking side (first token) plus an optional alignment along it: 'top-right' docks to the top edge, right-aligned ('top' centers). With floating: true the same value anchors the legend over the chart.

legend.reverse?

boolean

Renders the items back to front.

legend.toggleSeries?

boolean

Clicking an item toggles series visibility (true by default).

listeners?

{ legendItemClick?: (event) => void; nodeClick?: (event) => void; selectionChange?: (event) => void; zoomChange?: (event) => void; }

listeners.legendItemClick?

(event) => void

listeners.nodeClick?

(event) => void

listeners.selectionChange?

(event) => void

listeners.zoomChange?

(event) => void

loading?

boolean

Shows the "Loading…" overlay.

locale?

{ localeText?: { boxPlotMax?: string; boxPlotMedian?: string; boxPlotMin?: string; boxPlotQ1?: string; boxPlotQ3?: string; downloadPng?: string; loading?: string; noData?: string; ohlcClose?: string; ohlcHigh?: string; ohlcLow?: string; ohlcOpen?: string; quarter?: string; renderError?: string; resetZoom?: string; waterfallCumulative?: string; waterfallTotal?: string; }; }

locale.localeText?

{ boxPlotMax?: string; boxPlotMedian?: string; boxPlotMin?: string; boxPlotQ1?: string; boxPlotQ3?: string; downloadPng?: string; loading?: string; noData?: string; ohlcClose?: string; ohlcHigh?: string; ohlcLow?: string; ohlcOpen?: string; quarter?: string; renderError?: string; resetZoom?: string; waterfallCumulative?: string; waterfallTotal?: string; }

locale.localeText.boxPlotMax?

string

locale.localeText.boxPlotMedian?

string

locale.localeText.boxPlotMin?

string

locale.localeText.boxPlotQ1?

string

locale.localeText.boxPlotQ3?

string

locale.localeText.downloadPng?

string

locale.localeText.loading?

string

locale.localeText.noData?

string

locale.localeText.ohlcClose?

string

locale.localeText.ohlcHigh?

string

locale.localeText.ohlcLow?

string

locale.localeText.ohlcOpen?

string

locale.localeText.quarter?

string

locale.localeText.renderError?

string

locale.localeText.resetZoom?

string

locale.localeText.waterfallCumulative?

string

locale.localeText.waterfallTotal?

string

navigator?

{ enabled?: boolean; height?: number; max?: number; min?: number; miniChart?: { enabled?: boolean; }; }

navigator.enabled?

boolean

navigator.height?

number

navigator.max?

number

navigator.min?

number

Initial window (0..1).

navigator.miniChart?

{ enabled?: boolean; }

Mini chart of the first series inside the bar (enabled by default).

navigator.miniChart.enabled?

boolean

overlays?

{ error?: { enabled?: boolean; text?: string; }; loading?: { enabled?: boolean; text?: string; }; noData?: { enabled?: boolean; text?: string; }; }

overlays.error?

{ enabled?: boolean; text?: string; }

Shown when nothing could be drawn — every visible series refused the scales it was given, or the axis domain came to nothing. The reason itself goes to the console; this is the word the reader gets instead of an empty plot.

overlays.error.enabled?

boolean

overlays.error.text?

string

overlays.loading?

{ enabled?: boolean; text?: string; }

overlays.loading.enabled?

boolean

overlays.loading.text?

string

overlays.noData?

{ enabled?: boolean; text?: string; }

overlays.noData.enabled?

boolean

overlays.noData.text?

string

padding?

number | [number] | [number, number] | [number, number, number, number] | { bottom?: number; left?: number; right?: number; top?: number; }

selection?

{ boxSelect?: boolean; enabled?: boolean; inactiveOpacity?: number; itemStyle?: { sizeRatio?: number; stroke?: string; strokeWidth?: number; }; mode?: "single" | "multiple"; }

Datum selection via rubber band/clicks + listeners.selectionChange.

selection.boxSelect?

boolean

Drag selection box (multiple mode only, disabled by default).

selection.enabled?

boolean

selection.inactiveOpacity?

number

Opacity of unselected nodes while a selection is active (0.45 by default).

selection.itemStyle?

{ sizeRatio?: number; stroke?: string; strokeWidth?: number; }

Appearance of selected nodes.

selection.itemStyle.sizeRatio?

number

Size multiplier for markers of selected nodes.

selection.itemStyle.stroke?

string

selection.itemStyle.strokeWidth?

number

selection.mode?

"single" | "multiple"

single — each selection replaces the previous one; multiple — boxes and clicks accumulate the selection (clicking a node toggles it).

series?

SeriesOptions[]

subtitle?

{ color?: string; enabled?: boolean; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; padding?: number | [number] | [number, number] | [number, number, number, number] | { bottom?: number; left?: number; right?: number; top?: number; }; position?: "top" | "bottom"; spacing?: number; text?: string; textAlign?: "right" | "left" | "center"; wrap?: boolean; }

subtitle.color?

string

subtitle.enabled?

boolean

subtitle.fontFamily?

string

subtitle.fontSize?

number

subtitle.fontStyle?

subtitle.fontWeight?

subtitle.padding?

number | [number] | [number, number] | [number, number, number, number] | { bottom?: number; left?: number; right?: number; top?: number; }

Padding around the caption text in any CSS-like shorthand — 8, [8, 12], [8, 12, 4, 0] or { top, right, bottom, left }. By default only the plot-facing side is padded (8 px): below the caption in the 'top' zone, above it in the 'bottom' zone. When both captions share a zone, the padding of the outer one separates the two captions, and the padding of the one closest to the plot separates it from the plot. Horizontal padding narrows the width the text is wrapped within.

subtitle.position?

"top" | "bottom"

Vertical placement: above ('top', default) or below ('bottom') the plot.

subtitle.spacing?

number

Gap on the plot-facing side of the caption (8 by default).

Deprecated

Use padding — it covers the same gap and the other three sides. Kept as the default for the plot-facing side of padding.

subtitle.text?

string

subtitle.textAlign?

"right" | "left" | "center"

Horizontal alignment within the chart width ('center' by default).

subtitle.wrap?

boolean

Break the text onto several lines when it does not fit the available width (true by default). Line breaks written as '\n' always apply.

sync?

{ enabled?: boolean; groupId?: string; nodeInteraction?: boolean; zoom?: boolean; }

sync.enabled?

boolean

sync.groupId?

string

Charts sharing a groupId are synchronized (a common group by default).

sync.nodeInteraction?

boolean

Synchronize node highlighting (true by default).

sync.zoom?

boolean

Synchronize zoom (true by default).

theme?

ThemeName | { axis?: { color?: string; gridColor?: string; gridDash?: number[]; gridLine?: boolean; labelColor?: string; labelSize?: number; labelSpacing?: number; line?: boolean; lineDash?: number[]; strokeWidth?: number; tick?: boolean; tickColor?: string; tickSize?: number; titleColor?: string; titleSize?: number; }; baseTheme?: ThemeName | undefined; overrides?: {[key: string]: {[key: string]: unknown; } | { series?: {[key: string]: unknown; }; } | undefined; common?: {[key: string]: unknown; }; }; palette?: { fills?: string[]; sequential?: string[]; strokes?: string[]; }; params?: { axisColor?: string; backgroundColor?: string; cornerRadius?: number; fillOpacity?: number; fontFamily?: string; fontSize?: number; foregroundColor?: string; lineDash?: number[]; markStrokeWidth?: number; mutedColor?: string; negativeColor?: string; positiveColor?: string; strokeWidth?: number; }; }

title?

title.color?

string

title.enabled?

boolean

title.fontFamily?

string

title.fontSize?

number

title.fontStyle?

title.fontWeight?

title.padding?

number | [number] | [number, number] | [number, number, number, number] | { bottom?: number; left?: number; right?: number; top?: number; }

title.position?

"top" | "bottom"

Vertical placement: above ('top', default) or below ('bottom') the plot.

title.spacing?

number

Gap on the plot-facing side of the caption (8 by default).

Deprecated

Use padding — it covers the same gap and the other three sides. Kept as the default for the plot-facing side of padding.

title.text?

string

title.textAlign?

"right" | "left" | "center"

Horizontal alignment within the chart width ('center' by default).

title.wrap?

boolean

Break the text onto several lines when it does not fit the available width (true by default). Line breaks written as '\n' always apply.

{ background?: string; borderColor?: string; borderRadius?: number; borderWidth?: number; color?: string; enabled?: boolean; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; mode?: "single" | "shared"; padding?: string | number | [number] | [number, number] | [number, number, number, number] | { bottom?: number; left?: number; right?: number; top?: number; }; position?: { anchorTo?: "center" | "node" | "pointer"; xOffset?: number; yOffset?: number; }; range?: number | "exact" | "nearest"; shadow?: string | false; }

string

Container background (theme background by default).

string

Border color (theme muted color by default).

number

Border width; 0 removes the border.

string

boolean

string

number

"single" | "shared"

single — the nearest node; shared — values of all series in the category.

string | number | [number] | [number, number] | [number, number, number, number] | { bottom?: number; left?: number; right?: number; top?: number; }

Inner padding of the container: 8, [8, 12], [8, 12, 4, 0], { top, right, bottom, left } — or a raw CSS string.

{ anchorTo?: "center" | "node" | "pointer"; xOffset?: number; yOffset?: number; }

Positioning: at the node edge (by default), at the node center, or at the pointer.

"center" | "node" | "pointer"

number

number | "exact" | "nearest"

Capture area: a number — radius in px (30), 'exact' — only direct hits on a node, 'nearest' — the nearest node from anywhere in the plot area.

string | false

CSS box-shadow; false removes the shadow.

width?

number

Without width/height the chart follows its container (ResizeObserver).

zoom?

{ axes?: "y" | "x" | "xy"; doubleClickReset?: boolean; dragPan?: boolean; dragSelect?: boolean; enabled?: boolean; minRatio?: number; panKey?: "shift" | "meta" | "alt" | "ctrl"; visibleAnchor?: DomainAnchor; visibleCount?: number; wheelStep?: number; wheelZoom?: boolean; }

zoom.axes?

"y" | "x" | "xy"

Which axes are zoomable ('x' by default).

zoom.doubleClickReset?

boolean

Reset on double click (true by default).

zoom.dragPan?

boolean

Pan by dragging (true by default).

zoom.dragSelect?

boolean

Drag to select an area → zoom (false by default).

zoom.enabled?

boolean

zoom.minRatio?

number

Minimum window width (fraction of the domain, 0.05 by default).

zoom.panKey?

"shift" | "meta" | "alt" | "ctrl"

Modifier key for panning; without it, dragging selects an area (box-zoom).

zoom.visibleAnchor?

DomainAnchor

Which end of the domain visibleCount starts from ('start' by default).

zoom.visibleCount?

number

Initial window sized to this many items along the category axis. Applies even without enabled, and yields to an explicit navigator.min/max. minRatio does not clamp it: an explicit count outranks the interaction floor.

zoom.wheelStep?

number

Zoom step per wheel tick (0.1 by default).

zoom.wheelZoom?

boolean

Mouse wheel zoom (true by default).

Returns

Promise<void>

waitForUpdate()

waitForUpdate(): Promise<void>

Resolves after the scheduled render — including the redraw a still-loading web font triggers.

Returns

Promise<void>

zoomTo()

zoomTo(window, options?): void

Zoom window per axis, as fractions of the full domain.

Parameters

window

x?

ZoomWindow

y?

ZoomWindow

options?