Widget setup

Create a chart container and mount the widget with a datafeed object. This page ends with a stub that paints an empty chart; the next pages fill in history and streaming.

1. Page shell


<!DOCTYPE html>
<html lang="en">
	<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>GoCharting datafeed tutorial</title>
 <style>
 html,
 body,
 #chart {
 margin: 0;
 height: 100%;
 width: 100%;
 }
 </style>
	</head>
	<body>
 <div id="chart"></div>
 <script type="module" src="./main.js"></script>
	</body>
</html>

2. Install / load the SDK

npm


npm install @gocharting/chart-sdk react react-dom luxon


import { createChart } from "@gocharting/chart-sdk";

UMD (CDN)


<script src="https://gocharting.com/sdk/library/demo-550e8400-e29b-41d4-a716-446655440000/index.umd.js"></script>
<script>
	const { createChart } = GoChartingSDK;
</script>

3. Stub datafeed

Required methods only — enough for the widget to start. History returns no bars until the next step. Use the full GoCharting security object in resolveSymbol (see Datafeed implementation for the complete field reference).


const datafeed = {
	resolveSymbol(symbolName, onResolve, onError) {
		const parts = symbolName.split(":");
		const exchange = parts[0] || "BYBIT";
		const segment = parts[1] || "FUTURE";
		const symbol = parts[parts.length - 1] || "BTCUSDT";
		const validIntervals = ["1m", "5m", "15m", "1h", "1D"];
 
		onResolve({
			exchange,
			segment,
			symbol,
			name: "BTC / USDT PERPETUAL FUTURES",
			asset_type: "CRYPTO",
			source_id: symbol,
			pair: { from: "BTC", to: "USDT" },
			tradeable: true,
			is_index: false,
			is_formula: false,
			delay_seconds: 0,
			data_status: "streaming",
			contract_size: 1,
			tick_size: 0.1,
			display_tick_size: 1,
			volume_size_increment: 0.001,
			max_tick_precision: 1,
			max_volume_precision: 3,
			quote_currency: "USDT",
			future_type: "PERP",
			supports: { footprint: true },
			exchange_info: {
				name: "bybit",
				code: "BYBIT",
				zone: "UTC",
				hours: Array.from({ length: 7 }, () => ({ open: true })),
				valid_intervals: validIntervals,
			},
			ticker: symbol,
			full_name: `${exchange}:${segment}:${symbol}`,
			description: "BTC / USDT PERPETUAL FUTURES",
			type: "crypto",
			session: "24x7",
			timezone: "UTC",
			has_intraday: true,
			has_daily: true,
			supported_resolutions: validIntervals,
		});
	},
 
	async getBars(symbolInfo, resolution, periodParams) {
		return { bars: [], meta: { noData: true } };
	},
};

4. Create the chart


const chart = createChart("#chart", {
	datafeed,
	symbol: "BYBIT:FUTURE:BTCUSDT",
	interval: "1m",
	theme: "dark",
	licenseKey: "demo-550e8400-e29b-41d4-a716-446655440000",
	onReady: () => console.log("chart ready"),
	onError: (err) => console.error(err),
});

Autosize is on by default — keep #chart sized by CSS (height: 100% or a fixed height).

Checklist

Container exists before createChart
datafeed implements resolveSymbol and getBars
licenseKey is set
onReady fires without errors

→ Datafeed implementation — return real history and symbol metadata