Interface: ChartInstance
Methods
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
getState()
getState():
ChartState
Returns
setState()
setState(
state):Promise<void>
Parameters
state
Returns
Promise<void>
update()
update(
options):Promise<void>
Parameters
options
Returns
Promise<void>
updateDelta()
updateDelta(
patch):Promise<void>
Parameters
patch
animation?
{ duration?: number; enabled?: boolean; }
animation.duration?
number
Entrance animation duration, ms (600 by default).
animation.enabled?
boolean
annotations?
axes?
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[]
gradientLegend?
{ enabled?: boolean; position?: "right" | "bottom"; spacing?: number; thickness?: number; }
Color scale for colorField series (heatmap).
gradientLegend.enabled?
boolean
gradientLegend.position?
"right" | "bottom"
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[]
initialState.zoom?
{ x?: ZoomWindow; y?: ZoomWindow; }
initialState.zoom.x?
ZoomWindow
initialState.zoom.y?
ZoomWindow
legend?
{ background?: { cornerRadius?: number; fill?: string; padding?: number | { bottom?: number; left?: number; right?: number; top?: number; }; stroke?: string; strokeWidth?: number; }; data?: LegendItemOptions[]; enabled?: boolean; floating?: boolean; item?: { label?: { color?: string; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; }; marker?: { size?: number; }; }; offset?: { x?: number; y?: number; }; position?: LegendPlacement; toggleSeries?: boolean; }
legend.background?
{ cornerRadius?: number; fill?: string; padding?: number | { bottom?: number; left?: number; right?: number; top?: number; }; stroke?: string; strokeWidth?: number; }
Panel behind the items.
legend.background.cornerRadius?
number
4 by default.
legend.background.fill?
string
legend.background.padding?
number | { bottom?: number; left?: number; right?: number; top?: number; }
Inner padding; 8 by default when fill/stroke is set, otherwise 0.
legend.background.stroke?
string
legend.background.strokeWidth?
number
1 by default when stroke is set.
legend.data?
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?
{ label?: { color?: string; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; }; marker?: { size?: number; }; }
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?
{ size?: number; }
legend.item.marker.size?
number
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?
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.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?: { downloadPng?: string; loading?: string; noData?: string; resetZoom?: string; }; }
locale.localeText?
{ downloadPng?: string; loading?: string; noData?: string; resetZoom?: string; }
locale.localeText.downloadPng?
string
locale.localeText.loading?
string
locale.localeText.noData?
string
locale.localeText.resetZoom?
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?
{ loading?: { enabled?: boolean; text?: string; }; noData?: { enabled?: boolean; 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?
{ bottom?: number; left?: number; right?: number; top?: number; }
padding.bottom?
number
padding.left?
number
padding.right?
number
padding.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?
subtitle?
{ color?: string; enabled?: boolean; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; position?: "bottom" | "top"; spacing?: number; text?: string; textAlign?: "center" | "left" | "right"; }
subtitle.color?
string
subtitle.enabled?
boolean
subtitle.fontFamily?
string
subtitle.fontSize?
number
subtitle.fontStyle?
subtitle.fontWeight?
subtitle.position?
"bottom" | "top"
Vertical placement: above ('top', default) or below ('bottom') the plot.
subtitle.spacing?
number
Gap separating the caption from the plot area (8 by default).
subtitle.text?
string
subtitle.textAlign?
"center" | "left" | "right"
Horizontal alignment within the chart width ('center' by default).
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 | { baseTheme?: ThemeName | undefined; overrides?: {[key: string]: {[key: string]: unknown; } | { series?: {[key: string]: unknown; }; } | undefined; common?: {[key: string]: unknown; }; }; palette?: { fills?: string[]; strokes?: string[]; }; params?: { backgroundColor?: string; fontFamily?: string; foregroundColor?: string; }; }
title?
{ color?: string; enabled?: boolean; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; position?: "bottom" | "top"; spacing?: number; text?: string; textAlign?: "center" | "left" | "right"; }
title.color?
string
title.enabled?
boolean
title.fontFamily?
string
title.fontSize?
number
title.fontStyle?
title.fontWeight?
title.position?
"bottom" | "top"
Vertical placement: above ('top', default) or below ('bottom') the plot.
title.spacing?
number
Gap separating the caption from the plot area (8 by default).
title.text?
string
title.textAlign?
"center" | "left" | "right"
Horizontal alignment within the chart width ('center' by default).
tooltip?
{ enabled?: boolean; mode?: "single" | "shared"; position?: { anchorTo?: "center" | "node" | "pointer"; xOffset?: number; yOffset?: number; }; range?: number | "exact" | "nearest"; }
tooltip.enabled?
boolean
tooltip.mode?
"single" | "shared"
single — the nearest node; shared — values of all series in the category.
tooltip.position?
{ anchorTo?: "center" | "node" | "pointer"; xOffset?: number; yOffset?: number; }
Positioning: at the node edge (by default), at the node center, or at the pointer.
tooltip.position.anchorTo?
"center" | "node" | "pointer"
tooltip.position.xOffset?
number
tooltip.position.yOffset?
number
tooltip.range?
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.
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"; 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.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>
Returns
Promise<void>