GoCharting React Component

<GoCharting /> is the declarative React API for the GoCharting SDK — an alternative to imperative createChart(). Mount the component; React owns mount/unmount cleanup.

Props mirror ChartConfig (same surface as createChart). Details for each option: Configuration.

Quick start


import { GoCharting } from "@gocharting/chart-sdk";
 
function App() {
	return (
		<GoCharting
			symbol="BYBIT:FUTURE:BTCUSDT"
			interval="1D"
			datafeed={myDatafeed}
			licenseKey="demo-550e8400-e29b-41d4-a716-446655440000"
			theme="dark"
			height="600px"
			onReady={(chart) => {
				chart.addIndicator({ type: "EMA", id: "ema-20" });
			}}
			appCallback={(event) => {
				console.log(event.eventType, event.message);
			}}
		/>
	);
}

Sample app: React and TypeScript (GitHub ).

UMD (no JSX)


const { React, ReactDOM, GoCharting } = window.GoChartingSDK;
const root = ReactDOM.createRoot(document.getElementById("chart"));
root.render(
	React.createElement(GoCharting, {
		symbol: "BYBIT:FUTURE:BTCUSDT",
		interval: "1D",
		datafeed: myDatafeed,
		licenseKey: "demo-550e8400-e29b-41d4-a716-446655440000",
	}),
);

Note

Older UMD demos may use ReactDOM.render. Prefer createRoot on React 18+.

Props

Full field list and defaults: Configuration / ChartConfig. Below is the React-oriented summary.

Core

Prop	Type	Description
`symbol`	`string`	Initial symbol
`interval`	`string`	Initial interval
`datafeed`	`Datafeed`	Bars / resolve / optional ticks & marks
`licenseKey`	`string`	SDK license key (required)

Display

Prop	Type	Default	Description
`theme`	`"light" \| "dark"`	`"light"`	Named theme
`themeColor`	`string`	—	Hex background (see Themes)
`locale`	`string`	`"en-US"`	UI locale
`autosize`	`boolean`	`true`	AutoFit
`width` / `height`	`string \| number`	`"100%"`	Box size

Callbacks

Prop	Type	Description
`appCallback`	`(event) => void`	Single `{ eventType, message, onClose }` — Events
`onReady`	`(instance) => void`	Imperative helpers when mounted (see Ref)
`onError`	`(error) => void`	Construct / runtime errors

Trading & chrome

Prop	Type	Description
`trading`	`TradingConfig`	`enableTrading`, panels, stop orders, …
`exclude`	`ExcludeOptions`	Hide panels / indicators
`disableSearch` / `disableCompare` / `hideDrawingToolBar`	`boolean`	Top-bar / drawing chrome
`contextMenu`	`ContextMenuOptions`	Alias: `context_menu`
`popups`	`PopupsConfig`	Panel state overrides
`favourite` / `favorites`	`FavouriteConfig`	Favorites (`favorites` = TV-shaped map)
`defaultInitialChartConfig`	`DefaultInitialChartConfig`	Settings / appearance seed
`autoSave`	`boolean`	`sessionStorage` persistence (default `true`)
`showCrosshairPlusIcon`	`boolean`	Crosshair plus (default `true`)
`isNativeApp` / `touchMode`	`boolean`	WebView / JS mobile shell — Mobile WebView
`debugLog`	`boolean`	Console diagnostics

Construct-time (Phase 4)

Same as createChart — applied at mount:

Prop	Description
`disabled_features` / `enabled_features`	Featureset → chrome flags
`overrides` / `studies_overrides` / `settings_overrides`	Appearance / studies / settings
`timezone`	→ `settings.zone`
`studies_access`	Soft indicator blacklist → `exclude.indicators`

Persistence props (auto_save_delay, save_load_adapter, saved_data, snapshot_url, …) are accepted via the open props bag when you pass them through — see Configuration → Persistence.

Note

Unlike createChart(), the component does not expose skipLicenseValidation. A valid licenseKey is always required (use the demo key for evaluation).

Imperative access via ref

ref and onReady receive the ProfessionalChart helper surface (setSymbol, setInterval, addIndicator, setBrokerAccounts, resubscribeAll, *AtIndex, …) — same family as Chart Widget.

They do not expose the Phase 0–5 widget façade (activeChart(), setLayout(), subscribe(), applyOverrides(), …). For that, use createChart() and keep the returned instance.


import React, { useRef } from "react";
import { GoCharting } from "@gocharting/chart-sdk";
 
function ChartApp() {
	const chartRef = useRef(null);
 
	return (
		<div style={{ height: "600px" }}>
			<button onClick={() => chartRef.current?.setSymbol("BYBIT:FUTURE:ETHUSDT")}>
				ETHUSDT
			</button>
			<button onClick={() => chartRef.current?.setInterval("1h")}>1h</button>
 
			<GoCharting
				ref={chartRef}
				symbol="BYBIT:FUTURE:BTCUSDT"
				interval="1D"
				datafeed={myDatafeed}
				licenseKey="demo-550e8400-e29b-41d4-a716-446655440000"
			/>
		</div>
	);
}

Or from onReady:


<GoCharting
	symbol="BYBIT:FUTURE:BTCUSDT"
	interval="1D"
	datafeed={myDatafeed}
	licenseKey="demo-550e8400-e29b-41d4-a716-446655440000"
	onReady={(chart) => {
		chart.addIndicator({ type: "RSI", id: "rsi-14" });
	}}
/>

Trading example


<GoCharting
	symbol="BYBIT:FUTURE:BTCUSDT"
	interval="1m"
	datafeed={myDatafeed}
	licenseKey="demo-550e8400-e29b-41d4-a716-446655440000"
	theme="dark"
	trading={{
		enableTrading: true,
		showOpenOrders: true,
		showPositions: true,
	}}
	appCallback={(event) => {
		switch (event.eventType) {
			case "PLACE_ORDER":
				submitToBroker(event.message.order);
				if (event.onClose) event.onClose();
				break;
			case "CANCEL_ORDER":
				cancelAtBroker(event.message.order);
				break;
		}
	}}
	onReady={(chart) => {
		chart.setBrokerAccounts(myBrokerData);
	}}
/>

More: Trading, Events.

`<GoCharting />` vs `createChart()`

Aspect	`<GoCharting />`	`createChart()`
Style	Declarative (JSX)	Imperative
Lifecycle	React unmount cleans up	Call `chart.destroy()`
Config	Props ≈ `ChartConfig`	Config object
Convenience helpers	`ref` / `onReady` (Chart Widget–style)	Same helpers on the return value
Phase 0–5 façade	Not on ref — use `createChart`	`activeChart()`, `setLayout()`, `subscribe()`, …
Best for	React apps	Vanilla JS / non-React hosts

Configuration — all options
Chart API — createChart + Phase 0–5 façade
Chart Widget — convenience helpers (setSymbol, *AtIndex, …)
Events — appCallback / subscriptions
Framework integrations — React, Next, Vue, …
Types — ChartConfig / TradingConfig / …