Chart Creation API

import { createChart } from "@gocharting/chart-sdk";
 
const chart = createChart("#chart-container", {
	symbol: "AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
});

<GoCharting symbol="AAPL" interval="1D" datafeed={myDatafeed} licenseKey="YOUR_KEY" />

function createChart(
	container: HTMLElement | string,
	config: ChartConfig
): ChartInstance;

import { createChart } from "@gocharting/chart-sdk";
 
// Create your datafeed object (no inheritance!)
const myDatafeed = {
	async getBars(symbolInfo, resolution, periodParams) {
		// Fetch your market data
		return { bars: [...] };
	},
 
	resolveSymbol(symbolName, onResolve, onError) {
		const parts = String(symbolName).split(":");
		const exchange = parts[0] || "NASDAQ";
		const segment = parts.length >= 3 ? parts[1] : "EQUITY";
		const symbol = parts[parts.length - 1] || "AAPL";
		const name = symbol;
		const validIntervals = ["1m", "5m", "15m", "1h", "1D"];
		onResolve({
			exchange,
			segment,
			symbol,
			name,
			asset_type: "EQUITY",
			source_id: symbol,
			tradeable: true,
			is_index: false,
			is_formula: false,
			delay_seconds: 0,
			data_status: "streaming",
			contract_size: 1,
			tick_size: 0.01,
			display_tick_size: 0.01,
			volume_size_increment: 1,
			max_tick_precision: 2,
			max_volume_precision: 0,
			quote_currency: "USD",
			supports: { footprint: false },
			exchange_info: {
				name: exchange.toLowerCase(),
				code: exchange,
				country_cd: "US",
				zone: "America/New_York",
				hours: [
					{ open: false },
					{ open: true },
					{ open: true },
					{ open: true },
					{ open: true },
					{ open: true },
					{ open: false },
				],
				valid_intervals: validIntervals,
			},
			ticker: symbol,
			full_name: `${exchange}:${segment}:${symbol}`,
			description: name,
			type: "stock",
			session: "0930-1600",
			timezone: "America/New_York",
			has_intraday: true,
			has_daily: true,
			supported_resolutions: validIntervals,
		});
	},
 
	searchSymbols(userInput, exchange, symbolType, callback) {
		// Search for symbols
		callback(searchResults);
	}
};
 
//  Create chart with one simple call!
const chart = createChart('#chart-container', {
	symbol: "NASDAQ:AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "demo-550e8400-e29b-41d4-a716-446655440000",
	theme: "light",
	onReady: () => console.log("Chart ready!"),
	onError: (error) => console.error("Chart error:", error)
});
 
// Always clean up when done
chart.destroy();

//  Create chart with trading enabled
const tradingChart = createChart("#trading-chart", {
	symbol: "BYBIT:FUTURE:BTCUSDT",
	interval: "1m",
	datafeed: myDatafeed,
	licenseKey: "demo-550e8400-e29b-41d4-a716-446655440000",
	theme: "dark",
	trading: {
		enableTrading: true, //  Enable trading context menus
	},
	onReady: () => console.log("Trading chart ready!"),
	onError: (error) => console.error("Chart error:", error),
});
 
// Trading features now available:
// - Right-click context menu shows Buy/Sell options
// - CrossHair menu shows trading options
// - Settings > Trading tab is visible

import { GoCharting } from "@gocharting/chart-sdk";
 
function App() {
	return (
		<GoCharting
			symbol="NASDAQ:AAPL"
			interval="1D"
			datafeed={myDatafeed}
			licenseKey="demo-550e8400-e29b-41d4-a716-446655440000"
			theme="light"
			height="600px"
		/>
	);
}

chart.destroy();

useEffect(() => {
	const chart = createChart("#chart", config);
	return () => chart.destroy(); // Cleanup on unmount
}, []);

if (!chart.isDestroyed()) {
	chart.setSymbol("MSFT");
}

const instance = chart.getChartInstance();

const active = chart.activeChart();
console.log(active.symbol(), active.interval());
active.setSymbol("MSFT");
active.setInterval("5m");
// setResolution / resolution() remain as aliases of setInterval / interval
 
chart.chart(1).setChartType("candle");
chart.chart(0).addIndicator({ type: "SMA", id: "sma-1" });

console.log(chart.chartsCount(), chart.activeChartIndex());
chart.setActiveChart(1); // emits activeChartChanged / CHART_SELECTED

console.log(chart.layout()); // e.g. "1"
 
chart.subscribe("layout", (info) => {
	console.log(info.layout, info.charts.length, info.isMultichartingEnabled);
});
 
chart.setLayout("1|1"); // two stacked charts
chart.setLayout("2h"); // TV alias → GoCharting "2"
console.log(chart.chartsCount()); // 2

chart.setLayout("1|1");
chart.setLayoutSizes({ rows: [35, 65] });
chart.resetLayoutSizes(); // equal splits again

chart.subscribe("layout", () => {
	chart.unloadUnusedCharts();
});
chart.setLayout("1"); // after "2|2"

const blob = chart.save();
await chart.load(blob);
 
chart.subscribe("onAutoSaveNeeded", () => {
	chart.saveChartToServer({ name: chart.layoutName() || "Autosave" });
});
 
const id = await chart.saveChartToServer({ name: "My layout" });
await chart.loadChartFromServer(id);
console.log(chart.layoutName());

// Chart appearance — all live charts
chart.applyOverrides({
	background: { backgroundColor: "#1a1a2e" },
});
// or wrapped:
chart.applyOverrides({
	appearance: { background: { backgroundColor: "#1a1a2e" } },
});
 
// Studies by type — live SERIES + objectTemplates for future adds.
// Flat `{ strokeStyle }` is nested under appearance.EMA / appearance.RSI automatically.
chart.activeChart().addIndicator({ type: "EMA", name: "EMA" });
chart.applyStudiesOverrides({
	EMA: { strokeStyle: "rgba(255, 159, 67, 1)" },
	RSI: { appearance: { strokeStyle: "rgba(29, 209, 161, 1)" } },
});
 
// Root trading prefs (same shape as construct-time `trading`)
chart.applyTradingCustomization({ enableTrading: true, boxAlignment: "left" });

chart.setCSSCustomProperty("--gc-accent", "#3d8bfd");
console.log(chart.getCSSCustomPropertyValue("--gc-accent")); // "#3d8bfd"
 
chart.addCustomCSSFile("./phase3-custom-theme.css"); // removed on destroy
 
const themes = await chart.customThemes();
themes.applyCustomThemes({
	"--gc-panel-bg": "#1a2332",
	"--gc-accent": "#ff9f43",
});
themes.resetCustomThemes();

chart.setFeatureEnabled("topBar", false);
chart.setFeatureEnabled("header_symbol_search", false); // TV alias
chart.features().setValue({ drawingToolbar: false, compare: false });
console.log(chart.getFeatures());

await chart.headerReady();
const btn = chart.createButton({ align: "left" });
btn.textContent = "Ping";
btn.addEventListener("click", () => console.log("ping"));
 
const dd = await chart.createDropdown({
	title: "TF",
	align: "right",
	items: [
		{ title: "5m", onSelect: () => chart.setInterval("5m") },
		{ title: "1h", onSelect: () => chart.setInterval("1h") },
	],
});
chart.removeButton(btn);

const unsub = chart.onShortcut("alt+q", () => console.log("alt+q"));
// chart.onShortcut(["alt", 81], () => {});
 
chart.onContextMenu((unixtime, price) => [
	{
		position: "top",
		text: "Alert at price",
		click: () => console.log(unixtime, price),
	},
	{ text: "-" },
	{ position: "bottom", text: "Host action", click: () => {} },
	{ text: "-Reset chart" }, // hide built-in (best-effort)
]);

chart.closePopupsAndDialogs();
 
const ok = await chart.showConfirmDialog({
	title: "Accept terms?",
	body: "Continue only if you agree.",
});
 
await chart.showNoticeDialog({
	title: "Saved",
	body: "Layout stored locally.",
});

chart.selectLineTool("trend_line");
console.log(chart.selectedLineTool()); // "trend_line"
chart.hideAllDrawingTools().setValue(true);
chart.magnetEnabled().setValue(true);
// magnetMode() is a 0/1 view over the same boolean — GC only supports
// magnet on/off (no TV weak(0)/strong(1) engine). Prefer magnetEnabled().

const canvas = await chart.takeClientScreenshot();
const dataUrl = canvas.toDataURL("image/png");
 
// Requires construct-time snapshot_url
const url = await chart.takeScreenshot();
chart.subscribe("onScreenshotReady", (imageUrl) => console.log(imageUrl));

console.log(chart.undoRedoState());
chart.clearUndoHistory();
chart.resetCache(); // invalidate cached bars; does not refetch alone

const types = chart.getStudiesList(); // GC type ids, e.g. "RSI"
console.log(chart.getStudyInputs("RSI"));
console.log(chart.getStudyStyles("RSI"));
chart.activeChart().addIndicator({ type: "RSI" });

console.log(chart.supportedChartTypes()); // ["CANDLESTICK", "LINE", …]
console.log(chart.getIntervals()); // ["1m", "5m", "1D", …]
console.log(chart.symbolInterval()); // { symbol, interval }
console.log(chart.getDatafeedConfiguration()); // from datafeed onReady (P6-1)

console.log(chart.mainSeriesPriceFormatter().format(1234.5678));
chart.currencyAndUnitVisibility().setValue("alwaysOn"); // paints a "CCY" chip
chart.customSymbolStatus().symbol("BTCUSDT").setVisible(true).setTooltip("Note");

chart.navigationButtonsVisibility().setValue("alwaysOn");
chart.paneButtonsVisibility().setValue("alwaysOff");
chart.dateFormat().setValue("yyyy_mm_dd");
chart.timeHoursFormat().setValue("12");

chart.setLayout("1|1");
 
const sym = chart.symbolSync();
console.log(sym.value()); // false
sym.setValue(true); // all charts take the active chart symbol
sym.subscribe((on) => console.log("symbol sync", on));
 
chart.intervalSync().setValue(true);
chart.setInterval("1h"); // fans out while sync is on

chart.drawOnAllChartsEnabled().setValue(true);
chart.crosshairSync().setValue(true);
chart.dateRangeSync().setValue(true);
chart.timeSync().setValue(true);

const onActive = (msg) => console.log("active chart", msg.idx, msg.symbol);
chart.subscribe("activeChartChanged", onActive);
// also: chart.subscribe("layout", …)  // from CHART_MODE_CHANGED
// chart.subscribe("onAutoSaveNeeded", …)  // Phase 5
// or raw: chart.subscribe("CHART_SELECTED", …)
chart.unsubscribe("activeChartChanged", onActive);

const { isMultichartingEnabled, charts } = chart.getAllCharts();

const api = chart.activeChart();
console.log(api.chartIndex(), api.symbol(), api.interval(), api.chartType());
api.setSymbol("NASDAQ:MSFT");
api.setInterval("5m");
api.addIndicator({ type: "SMA", id: "sma-1" });
const state = api.getChartState();

const api = chart.activeChart();
const series = api.getSeries();
series?.setChartStyle("candles");
series?.priceScale().setMode("log");
series?.priceScale().setVisible(true);
 
const panes = api.getPanes();
const main = panes?.[0];
console.log(main?.id, main?.getMainSeries()?.symbol());
main?.getSeries()?.getPriceScale()?.setPriceToBarRatio(2);

const api = chart.activeChart();
const range = api.getVisibleRange(); // { from, to } Unix seconds
if (range) {
	api.setVisibleRange({ from: range.from - 86400, to: range.to });
}
api.setTimeFrame("1D");
api.zoomOut();
console.log(api.getVisibleBarsRange());
console.log(api.symbolExt()?.max_tick_precision, api.symbolExt()?.tick_size);
console.log(api.getPanes()?.[0]?.id); // e.g. MAIN_CHART
console.log(api.getAllPanesHeight());
api.setAllPanesHeight([0.7, 0.3]); // independent panes only, or full chartOrder
// e.g. [0.7, 0.15, 0.15] with VOLUME dependent → main+study fill 100%; volume overlays
console.log(api.getPriceToBarRatio());
api.setPriceToBarRatio(2); // locks 1 price unit == 2 bars
api.setScrollEnabled(false); // disable panning
api.setZoomEnabled(false); // disable wheel/pinch/toolbar zoom
console.log(api.exportData({ includeVolume: true })?.data?.length);

const api = chart.activeChart();
 
const hlineId = api.createShape({
	type: "HORIZONTAL_LINE",
	name: "Horizontal Line",
	shape: { y: 100 },
	chartId: "MAIN_CHART",
});
 
const lineId = api.createShape({
	type: "TRENDLINE",
	name: "Line",
	shape: {
		p1: { x: Date.now() - 86400000, y: 98 },
		p2: { x: Date.now(), y: 102 },
	},
});
 
const textId = api.createShape({
	type: "TEXT",
	name: "Text",
	shape: { x: Date.now(), y: 101 },
	appearance: { text: "Support" },
});

const sel = api.selection();
sel.set({ chartId: "MAIN_CHART", objectId: hlineId });
console.log(sel.get());
 
const groups = api.shapesGroupController();
const gid = groups.createGroup([hlineId, lineId]);
groups.setGroupVisibility(gid, false);
console.log(groups.getGidDescription(gid), groups.getGroupsVisibility());
 
api.onDrawingEvent().subscribe(({ type, objectId }) => {
	console.log("drawing", type, objectId);
});
chart.subscribe("drawing_event", ({ type, objectId, chartId }) => {
	console.log("widget drawing_event", type, objectId, chartId);
});

const api = chart.activeChart();
 
// Viewport
const range = api.getVisibleRange();
if (range) {
	api.setVisibleRange({ from: range.from - 86400, to: range.to });
}
api.setTimeFrame("1D");
 
// Shapes
const hlineId = api.createShape({
	type: "HORIZONTAL_LINE",
	name: "Horizontal Line",
	shape: { y: 100 },
});
const lineId = api.createShape({
	type: "TRENDLINE",
	name: "Line",
	shape: {
		p1: { x: Date.now() - 3_600_000, y: 98 },
		p2: { x: Date.now(), y: 102 },
	},
});
const textId = api.createShape({
	type: "TEXT",
	name: "Text",
	shape: { x: Date.now(), y: 101 },
	appearance: { text: "Note" },
});
 
api.bringToFront(hlineId);
console.log(api.availableZOrderOperations(hlineId));
console.log(api.getAllShapes().length, api.selection().get());
 
const groupId = api.shapesGroupController().createGroup([hlineId, lineId]);
console.log(api.shapesGroupController().getGroups());
console.log(api.shapesGroupController().getGidDescription(groupId));

const api = chart.activeChart();
api.addIndicator({ type: "SMA", name: "SMA" });
api.addIndicator({ type: "RSI", name: "RSI" });
const studies = api.getAllStudies();
console.log(studies.map((s) => ({ id: s.id, type: s.type, chartId: s.chartId })));
 
// Single-study remove (pane-aware)
const rsi = studies.find((s) => s.type === "RSI");
if (rsi) api.deleteObject(rsi.id, rsi.chartId);
 
const tpl = api.createStudyTemplate("My Mix"); // persists to Templates menu
api.createStudyTemplate({ name: "temp", save: false }); // snapshot only
api.removeAllStudies();
api.applyStudyTemplate(tpl);
// ids changed — re-resolve
const afterApply = api.getAllStudies();
const sma = afterApply.find((s) => s.type === "SMA");
if (sma) console.log(api.getStudyById(sma.id, sma.chartId));
 
const state = api.getChartState();
api.loadChartTemplate(state); // full chart restore

const api = chart.activeChart();
 
const order = api
	.createOrderLine()
	.setPrice(65000)
	.setText("Limit buy")
	.setQuantity(1)
	.onMove(() => console.log("moved", order.getPrice()))
	.onCancel(() => console.log("cancel clicked"));
 
const pos = api
	.createPositionLine()
	.setPrice(64000)
	.setQuantity(2)
	.setText("Long")
	.onClose(() => console.log("close"));
 
const fill = api
	.createExecutionShape()
	.setPrice(64500)
	.setTime(Math.floor(Date.now() / 1000))
	.setDirection("buy");
 
// order.remove(); pos.remove(); fill.remove();

const api = chart.activeChart();
 
const unsub = api.onSymbolChanged().subscribe(() => {
	console.log("symbol →", api.symbol());
});
 
api.dataReady(() => console.log("bars ready"));
 
api.onVisibleRangeChanged().subscribe((r) => {
	console.log("range", r.from, r.to);
});
 
api.crossHairMoved().subscribe(({ time, price }) => {
	// throttle in your UI if needed
});
 
api.executeActionById("zoomIn");
api.executeActionById("magnet");
 
api.requestSelectBar()
	.then(({ index, time }) => console.log("bar", index, time))
	.catch((e) => console.warn(e.message));
// api.cancelSelectBar();
 
// unsub();

chart.setSymbol("NASDAQ:MSFT");
chart.setSymbol("BYBIT:FUTURE:BTCUSDT");

chart.setInterval("1h");
chart.setInterval("5m");

chart.setTheme("dark");
chart.setTheme("light");

chart.setChartType("line");

chart.resize(800, 600);
chart.resize("100%", "50vh");

chart.goToDate("2025-06-01");
chart.goToDate(new Date(2025, 5, 1));
chart.goToDate({ date1: "2025-06-01", date2: "2025-06-15" }); // date range

chart.setTimezone("America/New_York");

const presets = chart.getTimezonePresets();
// [{ key, name, label }, ...]

const tz = chart.getCurrentTimezone();

chart.addIndicator({ type: "EMA", id: "ema-20" });

chart.addDrawing({
	type: "TREND_LINE",
	options: { /* coordinates */ },
});

chart.deleteObject("ema-20");

chart.updateSettings({ timezone: "America/New_York", showGrid: true });

const state = chart.getChartState();
localStorage.setItem("myChart", JSON.stringify(state));

const state = JSON.parse(localStorage.getItem("myChart"));
chart.setChartState(state);

// Change the second chart in a multichart layout
chart.setChartSymbolAtIndex("NASDAQ:MSFT", 1);
chart.setIntervalAtIndex("1h", 1);
chart.addIndicatorAtIndex({ type: "RSI", id: "rsi-14" }, 1);

const template = chart.saveTemplate("My Setup");

chart.applyTemplate(template);

const templates = chart.getTemplates();

chart.deleteTemplate(templateId);

chart.setBrokerAccounts({
	accountList: [
		{
			account_id: "ACCOUNT_001",
			currency: "USD",
			balance: 50000,
		},
	],
	orderBook: [ /* active orders */ ],
	tradeBook: [ /* executed trades */ ],
	positions: [ /* open positions */ ],
});

chart.updatePositions([
	{ key: "demo-BYBIT:FUTURE:BTCUSDT-POS_001", bid: 50100, ask: 50101 },
]);

// Recommended: refetch bars when the user returns to the tab
let hiddenAt = 0;
const LONG_HIDDEN_MS = 30_000;
document.addEventListener("visibilitychange", () => {
	if (document.hidden) {
		hiddenAt = Date.now();
		return;
	}
	if (hiddenAt && Date.now() - hiddenAt < LONG_HIDDEN_MS) return;
	chart.resubscribeAll();
});
 
// After WebSocket reconnect
websocket.onreconnect = () => {
	chart.resubscribeAll(freshIdToken);
};

chart.setOIProfile("oi");

const settings = chart.getOIProfileSettings();

const chart = createChart("#chart", {
	symbol: "AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_KEY",
	onReady: (chartInstance) => {
		// Chart is ready - perform operations here
		console.log("Chart is ready!");
		// You can now safely call methods
		chartInstance.setSymbol("MSFT");
	},
});

const chart = createChart("#chart", {
	symbol: "AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_KEY",
	onError: (error) => {
		console.error("Chart error:", error);
		// Handle the error appropriately
	},
});

// When component unmounts or page unloads
chart.destroy();

// React hook cleanup
useEffect(() => {
	const chart = createChart("#chart", config);
	return () => chart.destroy();
}, []);
 
// Chart recreation
function recreateChart() {
	// Always destroy before creating new chart
	if (currentChart) {
		currentChart.destroy();
	}
	currentChart = createChart("#chart", newConfig);
}
 
// Page unload
window.addEventListener("beforeunload", () => {
	if (chart) {
		chart.destroy();
	}
});

// Instead of multiple calls
chart.setBrokerAccounts({
  accountList: [...],
  orderBook: [...],
  tradeBook: [...],
  positions: [...]
});
 
// For frequent lightweight updates (prices, PnL), prefer:
chart.updatePositions(partialUpdates);