ChartInstance

createChart() returns ChartInstance — the stable, typed API for almost every integration.

import { createChart, type ChartInstance } from "@efixdata/exeria-chart";

const chart: ChartInstance = createChart({ container });

Use this page as a lookup table. For step-by-step tasks, see Chart usage.

Loading chart…

ChartInstance is the handle to everything inside this chart.

Lifecycle

Method	What it does
`init()`	Prepare canvases and internal state — call once after `createChart`
`destroy()`	Tear down listeners and DOM — call on unmount or route leave

chart.init();
// … use chart …
chart.destroy();

Guide: Chart lifecycle.

Data — your API

Method	What it does
`setMainSeriesData(data, interval?, moveToEnd?)`	Replace main series candles (async)
`appendMainSeriesData(data)`	Append older or newer candles to the main series
`appendTick(tick, recalculate?)`	Push one live update (price or full OHLC)
`appendTicks(ticks, recalculate?)`	Batch version of `appendTick`
`getCurrentPrice()`	Last known tick, or `null`

await chart.setMainSeriesData(candles, { symbol: "1h", milis: 3_600_000 });

chart.appendTick({ stamp: Date.now(), price: 42_150 });

Guides: Loading data, Realtime updates.
Types: Candle, Tick — Data model.

Data — Data Connector

Method	What it does
`setDataAdapter(adapter)`	Attach a connector implementing `DataAdapter`
`loadData(symbol, options)`	Fetch history through the adapter
`subscribeToUpdates(symbol, callback?)`	Start live stream
`unsubscribeFromUpdates()`	Stop live stream

chart.setDataAdapter(connector);
await chart.loadData("BTCUSDT", { interval: "1h", limit: 1000 });
chart.subscribeToUpdates("BTCUSDT", (tick) => console.log(tick.c));

Contract: Data Connectors. Tutorial: Connect with a Data Connector.

Instrument and interval

Method	What it does
`setInstrument(instrument)`	Set symbol metadata (name, intervals, precision)
`getInstrument()`	Current instrument, or `undefined`
`getInterval()`	Active interval object
`getCurrency()`	Display currency string, if set

Instrument fields you often set:

chart.setInstrument({
  symbol: "BTCUSDT",
  name: "Bitcoin / Tether",
  currency: "USDT",
  precision: 2,
  availableIntervals: [
    { symbol: "1h", milis: 3_600_000 },
    { symbol: "1d", milis: 86_400_000 },
  ],
});

Multi-instrument (overlays)

Method	What it does
`getMainSeriesId()`	ID of the main price series
`getSelectedInstrumentSeriesId()`	Which symbol is selected in the UI
`setSelectedInstrumentSeriesId(seriesId)`	Select overlay for editing
`getInstrumentDrawMode(seriesId?)`	Draw mode for main or overlay
`setInstrumentDrawMode(mode, seriesId?)`	Candles vs line per series
`getChartInstrumentSettings()`	Overlay symbols only (not main)
`applyChartInstrumentSettings(seriesId, patch)`	Colors, dash, draw mode for overlay

Guide: Multi-instrument charts.

Rendering and scale

Method	What it does
`setMainDrawMode(mode)`	Main series: `"OHLC"`, `"Line"`, `"Bars"`, …
`getValueAxisMode()`	`"lin"`, `"log"`, or `"%"`
`setValueAxisMode(mode)`	Switch Y-axis scale
`getValueAxisWidth()`	Pixel width of price axis (for layout)
`getAutoScale()` / `setAutoScale(bool)`	Fit Y axis to visible range
`fit()`	Recalculate layout after resize
`render()` / `renderOverlay()`	Force redraw (rare — chart usually auto-renders)

Guide: Autoscale and value axis, Rendering and scales.

Chart settings (appearance)

Method	What it does
`getChartAppearanceSettings()`	Theme, grid, scales, last-price line, …
`applyChartAppearanceSettings(settings)`	Apply appearance patch
`applyChartTheme(theme, themeVariant?)`	Quick theme swap
`getChartVolumeSettings()` / `applyChartVolumeSettings()`	Volume pane visibility and colors
`exportChartSettingsTemplate(name?)`	JSON snapshot of user settings
`importChartSettingsTemplate(template)`	Restore from snapshot

Guide: Chart settings. Tutorial: Save and restore settings.

Layers — indicators, functions, strategies, drawings

Method	What it does
`getChartIndicatorSettings()`	List indicators with visibility flags
`setChartIndicatorVisibility(id, visible)`	Show/hide indicator plot
`setChartIndicatorPriceTagVisibility(id, visible)`	Show/hide price tag on scale
`setChartIndicatorLocked(id, locked)`	Lock indicator from edits
`removeChartIndicator(id)`	Remove indicator
`getChartFunctionSettings()`	Same pattern for functions
`setChartFunctionVisibility` / `setChartFunctionPriceTagVisibility` / `removeChartFunction`	Function layer controls
`getChartStrategySettings()`	Strategy layer list
`setChartStrategyVisibility` / `removeChartStrategy`	Strategy visibility
`getChartDrawingSettings()`	User drawings list
`setChartDrawingVisibility` / `removeChartDrawing`	Drawing visibility
`getDrawingEditConfig(id)` / `applyDrawingEditSettings(id, patch)`	Edit one drawing's style

Scripts (add / update indicators)

Method	What it does
`getScripts()`	Catalog of available script definitions
`addScript(scriptKey, proto?)`	Add built-in or custom script
`updateIndicator(scriptId, proto?)`	Change inputs after add
`getIndicatorEditConfig(scriptId)`	Form schema for settings dialog
`getChartPanels()`	Panel list (`main` flag on price pane)
`getSeriesManager()`	Low-level series map

Tutorial: Add an indicator. Deeper: Programmatic wiring.

Drawings (`toolDrawer`)

Method	What it does
`toolDrawer.drawTool(config)`	Any drawing `type` + anchors
`toolDrawer.drawTrendLine(options?)`	Shortcut for trend line
`toolDrawer.drawTimeRange(options)`	Time range highlight
`toolDrawer.drawTimeBet(options)`	Time bet marker
`toolDrawer.drawLongShortPosition(options)`	Trade plan box
`toolDrawer.deleteTool(id)`	Remove drawing by id
`onDownload(watermark?, w?, h?)`	Export chart image

Guide: Drawing and interaction. Catalog: Drawing tools.

Interaction

Method	What it does
`setCursor(mode)`	`"DEFAULT"`, `"CROSSHAIR"`, `"ERASER"`, …
`setObjectSelectionAllowed(allowed)`	Lock/unlock selecting drawings
`getDrawingMagnetEnabled()` / `setDrawingMagnetEnabled()`	Snap drawings to OHLC
`getAllDrawingsLocked()` / `lockAllDrawings()` / `unlockAllDrawings()`	Bulk lock
`getInteractor()`	Low-level mode and staging object

Locale

Method	What it does
`getLocale()` / `setLocale(locale, overrides?)`	UI language
`getSupportedLocales()`	`{ id, label }[]` for picker
`getLocaleMessages()`	Resolved message catalog
`translate(text)`	Translate a catalog key

Layout and environment

Method	What it does
`getChartEnvironment()`	Snapshot: `layoutMode`, `isCompact`, `isTouch`, …
`setLayoutMode(mode)`	`"auto"` \| `"desktop"` \| `"compact"` \| `"touch"`

Pass layout at create time:

createChart({
  container,
  layout: { mode: "auto", breakpoints: { compact: 600 } },
});

Full types: Chart environment and layout. Guide: Mobile and responsive.

Events

subscribe(topic, callback) returns a subscription with unsubscribe().

const sub = chart.subscribe("INTERVAL_CHANGE", (interval) => {
  console.log(interval.symbol);
});
sub?.unsubscribe();

Typed topics (`ChartEventPayloads`)

Topic	Payload (summary)
`AUTOSCALE`	`{ autoScale: boolean }`
`CURSOR_CHANGE`	`{ cursor: string }`
`INTERVAL_CHANGE`	`Interval` object
`INDICATOR_EDIT_REQUEST`	`{ scriptId }` — user opened indicator settings
`DRAWING_EDIT_REQUEST`	`{ objectId }` — user opened drawing settings
`OBJECT_SELECTION_ALLOWED_CHANGE`	`boolean`
`DRAWING_MAGNET_CHANGE`	`{ enabled: boolean }`
`DRAWINGS_LOCK_CHANGE`	`{ allLocked: boolean }`
`VALUE_AXIS_WIDTH_CHANGE`	`number` (pixels)
`LOCALE_CHANGE`	`{ locale: string }`
`ENVIRONMENT_CHANGE`	`ChartEnvironmentSnapshot`
`SELECTED_INSTRUMENT_CHANGE`	`{ seriesId: string }`
`INSTRUMENT_DRAW_MODE_CHANGE`	`{ seriesId, drawMode }`

Use events to sync your app state (headers, side panels) with chart UI actions.

`createChart` options (related types)

Option	Type	Purpose
`container`	`HTMLElement`	Required mount target
`instrument`	`Instrument`	Initial symbol metadata
`config`	`ChartConfig`	Feature flags (`multiInstrumentChart`, …)
`theme` / `themeVariant`	`ChartTheme`, `string`	Candle and axis colors
`locale` / `messages`	`string`, `Record`	Language overrides
`layout`	`ChartLayoutOptions`	Compact breakpoint
`dataAdapter`	`DataAdapter`	Optional connector

Boundary with the `Chart` class

These exist on the exported Chart class but not on ChartInstance today:

moveToEnd(), moveToStamp(stamp)
upsertCandle(candle)
addPanelToModel()
getScriptsManager() (raw Fusion map)
prependMainSeriesData() — stub; do not use

When you need them: Chart runtime access.

Full API (generated from TypeScript)

This table is generated from ChartInstance in packages/chart/src/types.ts on 2026-06-19. Use the curated sections above for task-oriented guidance; use this table when you need the complete contract.

`ChartInstance`

Member	Type	Description
`canvas?`	`HTMLCanvasElement \| null \| undefined`	—
`ctx?`	`CanvasRenderingContext2D \| null \| undefined`	—
`canvasWidth?`	`number \| undefined`	—
`canvasHeight?`	`number \| undefined`	—
`instrument?`	`Instrument \| undefined`	—
`toolDrawer`	`ToolDrawerApi`	—
`init`	`() => void`	—
`setInstrument`	`(instrument: Instrument) => void`	—
`getInstrument`	`() => Instrument \| undefined`	—
`setMainSeriesData`	`(data: Candle[], interval?: Interval \| undefined, moveToEnd?: boolean \| undefined) => Promise<void>`	—
`setDataAdapter`	`(adapter: DataAdapter) => void`	—
`loadData`	`(symbol: string, options: LoadDataOptions) => Promise<void>`	—
`subscribeToUpdates`	`(symbol: string, callback?: ((update: Tick) => void) \| undefined) => void`	—
`unsubscribeFromUpdates`	`() => void`	—
`getCurrentPrice`	`() => Tick \| null`	—
`appendMainSeriesData`	`(data: Candle[]) => void`	—
`appendTick`	`(tick: Tick, recalculate?: boolean \| undefined) => void`	—
`appendTicks`	`(ticks: Tick[], recalculate?: boolean \| undefined) => void`	—
`recalculateScripts`	`(options?: { rerender?: boolean \| undefined; shortSynchronization?: boolean \| undefined; } \| undefined) => Promise<void>`	—
`moveToEnd`	`(options?: { rerender?: boolean \| undefined; } \| undefined) => void`	—
`setMainDrawMode`	`(mode: DrawMode) => void`	—
`getMainSeriesId`	`() => string`	—
`getSelectedInstrumentSeriesId`	`() => string`	—
`setSelectedInstrumentSeriesId`	`(seriesId: string) => void`	—
`getInstrumentDrawMode`	`(seriesId?: string \| undefined) => DrawMode`	—
`setInstrumentDrawMode`	`(mode: DrawMode, seriesId?: string \| undefined) => void`	—
`getValueAxisMode`	`() => ValueAxisMode`	—
`setValueAxisMode`	`(mode: ValueAxisMode) => void`	—
`getValueAxisWidth`	`() => number`	—
`getAutoScale`	`() => boolean`	—
`setAutoScale`	`(autoScale: boolean) => void`	—
`getCurrency`	`() => string \| undefined`	—
`getInterval`	`() => Interval \| undefined`	—
`getScripts`	`() => Record<string, ScriptDefinition>`	—
`getChartPanels`	`() => { id: string; label: string; main?: boolean \| undefined; }[]`	—
`getIndicatorEditConfig`	`(scriptId: string \| number) => ScriptDefinition \| null`	—
`addScript`	`(scriptKey: string, proto?: ScriptDefinition \| undefined) => void \| Promise<void>`	—
`updateIndicator`	`(scriptId: string \| number, proto?: ScriptDefinition \| undefined) => void \| Promise<void>`	—
`getChartAppearanceSettings`	`() => ChartAppearanceSettings`	—
`applyChartAppearanceSettings`	`(settings: ChartAppearanceSettings) => void`	—
`getChartLegendSettings`	`() => ChartLegendSettings`	—
`applyChartLegendSettings`	`(settings: ChartLegendSettings) => void`	—
`getChartInstrumentSettings`	`() => ChartInstrumentSettingsItem[]`	—
`applyChartInstrumentSettings`	`(seriesId: string, settings: Partial<Pick<ChartInstrumentSettingsItem, "lineColor" \| "lineDash" \| "drawMode"> & ChartInstrumentSymbolAppearance>) => void`	—
`applyChartTheme`	`(theme: ChartTheme, themeVariant?: string \| undefined) => void`	—
`getChartVolumeSettings`	`() => ChartVolumeSettings`	—
`applyChartVolumeSettings`	`(settings: ChartVolumeSettings) => void`	—
`getChartIndicatorSettings`	`() => ChartIndicatorSettingsItem[]`	—
`setChartIndicatorVisibility`	`(scriptId: string \| number, visible: boolean) => void`	—
`setChartIndicatorPriceTagVisibility`	`(scriptId: string \| number, visible: boolean) => void`	—
`getChartIndicatorLocked`	`(scriptId: string \| number) => boolean`	—
`setChartIndicatorLocked`	`(scriptId: string \| number, locked: boolean) => void`	—
`removeChartIndicator`	`(scriptId: string \| number) => void`	—
`getChartFunctionSettings`	`() => ChartFunctionSettingsItem[]`	—
`setChartFunctionVisibility`	`(scriptId: string \| number, visible: boolean) => void`	—
`setChartFunctionPriceTagVisibility`	`(scriptId: string \| number, visible: boolean) => void`	—
`removeChartFunction`	`(scriptId: string \| number) => void`	—
`getChartStrategySettings`	`() => ChartStrategySettingsItem[]`	—
`setChartStrategyVisibility`	`(scriptId: string \| number, visible: boolean) => void`	—
`removeChartStrategy`	`(scriptId: string \| number) => void`	—
`getChartDrawingSettings`	`() => ChartDrawingSettingsItem[]`	—
`setChartDrawingVisibility`	`(objectId: string \| number, visible: boolean) => void`	—
`removeChartDrawing`	`(objectId: string \| number) => void`	—
`getDrawingEditConfig`	`(objectId: string \| number) => ChartDrawingEditConfig \| null`	—
`applyDrawingEditSettings`	`(objectId: string \| number, patch: ChartDrawingEditPatch) => void`	—
`exportChartSettingsTemplate`	`(name?: string \| undefined) => ChartSettingsTemplate`	—
`importChartSettingsTemplate`	`(template: ChartSettingsTemplate) => void`	—
`getSeriesManager`	`() => ChartSeriesManager`	—
`getInteractor`	`() => ChartInteractor`	—
`fit`	`() => void`	—
`render`	`(objectOnlyOnOverlay?: unknown) => void`	—
`renderOverlay`	`() => void`	—
`onDownload`	`(watermark?: string \| undefined, watermarkWidth?: number \| undefined, watermarkHeight?: number \| undefined) => void`	—
`translate`	`(text: string) => string`	—
`getLocale`	`() => string`	—
`setLocale`	`(locale: string, messageOverrides?: Record<string, unknown> \| undefined) => void`	—
`getSupportedLocales`	`() => { id: string; label: string; }[]`	—
`getLocaleMessages`	`() => Messages`	—
`getChartEnvironment`	`() => ChartEnvironmentSnapshot`	—
`setLayoutMode`	`(mode: ChartLayoutModeOverride) => void`	—
`subscribe`	`{ <TTopic extends keyof ChartEventPayloads>(topic: TTopic, callback: (data: ChartEventPayloads[TTopic]) => void): void \| ChartSubscription; (topic: string, callback: (data: unknow…`	—
`setCursor`	`(mode: string) => void`	—
`setObjectSelectionAllowed`	`(isAllowed: boolean) => void`	—
`requestIndicatorEdit`	`(scriptId: string \| number) => void`	—
`getDrawingMagnetEnabled`	`() => boolean`	—
`setDrawingMagnetEnabled`	`(enabled: boolean) => void`	—
`getAllDrawingsLocked`	`() => boolean`	—
`lockAllDrawings`	`() => void`	—
`unlockAllDrawings`	`() => void`	—
`destroy`	`() => void`	—

What is next?

Chart environment and layout — breakpoints and compact metrics
Data Connectors — DataAdapter contract
Chart usage — task-oriented guides

Lifecycle​

Data — your API​

Data — Data Connector​

Instrument and interval​

Multi-instrument (overlays)​

Rendering and scale​

Chart settings (appearance)​

Layers — indicators, functions, strategies, drawings​

Scripts (add / update indicators)​

Drawings (toolDrawer)​

Interaction​

Locale​

Layout and environment​

Events​

Typed topics (ChartEventPayloads)​

createChart options (related types)​

Boundary with the Chart class​

Full API (generated from TypeScript)​

ChartInstance​

What is next?​