Chart Widget API

Imperative helpers on the object returned by createChart(). Use these for quick symbol/interval/theme changes, multichart *AtIndex calls, broker book updates, and resubscription.

For Phase 0–5 widget APIs (activeChart(), setLayout(), subscribe(), applyOverrides(), persistence, …), see the Chart API — that is the primary surface.

Tip

Prefer the createChart return value (chart). Avoid relying on getChartInstance() / the onReady ProfessionalChart ref for new code — those expose the same legacy helpers without the Phase 0–5 façade.

Quick start


import { createChart } from "@gocharting/chart-sdk";
 
const chart = createChart("#chart-container", {
	symbol: "BYBIT:FUTURE:BTCUSDT",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	onReady: () => {
		// Chart is mounted — call methods on `chart` (the createChart return value)
		chart.setSymbol("BYBIT:FUTURE:ETHUSDT");
		chart.setInterval("1h");
		chart.setTheme("dark");
	},
});
 
// Same helpers are available immediately after createChart returns
// (they throw until the internal chart is ready)

Preferred vs legacy style


// Preferred (Phase 0–5) — per-pane API
chart.activeChart().setSymbol("MSFT");
chart.chart(1).setInterval("15m");
chart.setLayout("1|1");
 
// Convenience on the widget (still supported)
chart.setSymbol("MSFT");
chart.setIntervalAtIndex("15m", 1);

See Chart API → Widget façade.

Access patterns

Access	What you get
`const chart = createChart(...)`	Full widget: Phase 0–5 façade plus the helpers below
`chart.getChartInstance()`	Internal `ProfessionalChart` — same legacy helpers only
`onReady` callback arg	Same internal instance as `getChartInstance()`
`<GoCharting onReady={…} />`	Limited React ref — see GoCharting Component

Basic control

Method	Description
`destroy()`	Tear down the chart and subscriptions
`isDestroyed()`	Whether `destroy()` already ran
`setSymbol(symbol)`	Symbol on the active chart
`setInterval(interval)`	Interval on the active chart
`setTheme("light" \| "dark")`	Named theme (see Themes; hex via `themeColor` / `setTheme` behavior there)
`getAllCharts()`	`{ isMultichartingEnabled, charts }` snapshot


chart.setSymbol("BYBIT:FUTURE:BTCUSDT");
chart.setInterval("5m");
chart.setTheme("dark");

Resize the container (or rely on AutoFit). There is no supported resize() API.

Multichart (`*AtIndex`)

0-based indexes. Prefer chart.chart(index) / setActiveChart(index) from the Chart API when you need the full IChartApi.

Method	Description
`setChartSymbolAtIndex(symbol, idx)`	Symbol on chart `idx`
`setIntervalAtIndex(interval, idx)`	Interval on chart `idx`
`setChartTypeAtIndex(type, idx)`	Chart type on chart `idx`
`addIndicatorAtIndex(indicator, idx)`	Add study on chart `idx`
`addDrawingAtIndex(drawing, idx, chartId?)`	Add drawing on chart `idx`
`deleteObjectAtIndex(objectId, idx, chartId?)`	Remove entity on chart `idx`
`updateSettingsAtIndex(settings, idx)`	Merge settings on chart `idx`
`getChartStateAtIndex(idx)` / `setChartStateAtIndex(state, idx)`	Pane state snapshot / restore


chart.setLayout?.("2"); // or use layout chooser
chart.setChartSymbolAtIndex("ETHUSDT", 0);
chart.setChartSymbolAtIndex("BTCUSDT", 1);
chart.setIntervalAtIndex("15m", 1);

Indicators & drawings

Method	Description
`addIndicator({ type, id, … })`	Add study on the active chart (GC type ids, e.g. `"RSI"`, `"EMA"`)
`addDrawing(drawing, chartId?)`	Add drawing on active chart (`chartId` default `"MAIN_CHART"`)
`deleteObject(objectId, chartId?)`	Remove study or drawing


chart.addIndicator({ type: "RSI", id: "rsi-1" });
chart.addDrawing({
	type: "trendline",
	name: "Support",
	options: {},
	appearance: { color: "#00FF00", lineWidth: 2 },
});
chart.deleteObject("rsi-1");

For richer shape/study APIs (createShape, createStudy, templates, z-order), use chart.activeChart().

Settings & state

Method	Description
`updateSettings(partial)`	Merge settings on the active chart
`getChartState()` / `setChartState(state)`	Snapshot / restore active chart state


chart.updateSettings({ zone: "America/New_York" });
 
const state = chart.getChartState();
// …persist…
chart.setChartState(state);

Named layout persistence / autosave adapters: Configuration + Events (onAutoSaveNeeded).

Trading

Method	Description
`setBrokerAccounts(data)`	Push accounts / orders / trades / positions into the chart
`updatePositions(positions)`	Patch positions without a full book rebuild (when available)


chart.setBrokerAccounts({
	accountList: [{ id: "1", name: "Demo", balance: 10000, currency: "USD" }],
	orderBook: [],
	tradeBook: [],
	positions: [],
});

Requires trading.enableTrading: true. Handle UI actions via appCallback. Details: Trading API.

Resubscription

`resubscribeAll(idToken?)`

Rehydrate candles, ticks, compare symbols, and related feeds after a long tab hide, WebSocket reconnect, or auth refresh.


document.addEventListener("visibilitychange", () => {
	if (!document.hidden) {
		chart.resubscribeAll();
	}
});
 
// Optional new auth token
chart.resubscribeAll(newIdToken);

Method summary

Category	Methods
Lifecycle	`destroy`, `isDestroyed`, `getChartInstance`
Active chart	`setSymbol`, `setInterval`, `setTheme`, `getAllCharts`
Multichart	`setChartSymbolAtIndex`, `setIntervalAtIndex`, `setChartTypeAtIndex`, `*AtIndex` variants
Studies / drawings	`addIndicator`, `addDrawing`, `deleteObject` (+ `*AtIndex`)
Settings / state	`updateSettings`, `getChartState`, `setChartState` (+ `*AtIndex`)
Trading	`setBrokerAccounts`, `updatePositions`
Data	`resubscribeAll`

Phase 0–5 façade (activeChart, layout, subscribe, overrides, features, save/load, …): Chart API.

Chart API — primary createChart façade (Phase 0–5)
Configuration — ChartConfig / construct options
Events — appCallback, widget subscribe
Trading — broker book + order events
Themes — theme / themeColor / setTheme
GoCharting Component — declarative React API
Types — TypeScript definitions