Skip to Content
API ReferenceGoCharting Component

⚛️ GoCharting React Component

The <GoCharting /> component is the declarative React API for the GoCharting SDK — an alternative to the imperative createChart() function. Render a full professional chart by mounting a component; React handles the mount/unmount lifecycle for you.

It mirrors createChart()’s configuration surface: every config option becomes a prop, and the appCallback contract is identical.

🚀 Quick Start

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"
			onReady={(chart) => chart.addIndicator({ type: "EMA", id: "ema-20" })}
			appCallback={(event) => console.log(event.eventType, event.message)}
		/>
	);
}

Without JSX (UMD build)

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

📋 Props

Props mirror the createChart() configuration object — see the Configuration API for detailed descriptions of each option.

Core Props

PropTypeDefaultDescription
symbolstring—Initial symbol to display
intervalstring—Initial time interval
datafeedobject—Datafeed object (see Datafeed API)
licenseKeystring—Your SDK license key

Display Props

PropTypeDefaultDescription
themestring"light"Chart theme (‘light’ or ‘dark’)
localestring"en-US"Locale for translations
autosizebooleantrueEnable AutoFit responsive sizing
widthstring | number"100%"Chart width
heightstring | number"100%"Chart height

Callback Props

PropTypeDescription
appCallbackfunctionReceives a single { eventType, message, onClose } event object — same contract as createChart() (see Events API)
onReadyfunctionCalled with the imperative chart instance when the chart is mounted
onErrorfunctionCalled on chart errors

Feature & Override Props

PropTypeDefaultDescription
enableTradingbooleanfalseEnable trading features
tradingobject—Trading configuration override
excludeobject—UI elements to exclude
defaultInitialChartConfigobject—Chart configuration overrides
themeColorstring—Theme color override
contextMenuobject—Context menu options override
popupsobject—Popup preferences override
favouriteobject—User favorites override
disableSearchbooleanfalseHide search bar in top bar
disableComparebooleanfalseHide compare button in top bar
autoSavebooleantrueAuto-save chart state to sessionStorage
showCrosshairPlusIconbooleantrueShow the crosshair plus icon
isNativeAppbooleanfalseNative/Flutter mode: hides TopBar, drawing side menu, and portals
touchModebooleanfalseForce touch/mobile mode regardless of user agent
debugLogbooleanfalseEnable debug logging to console
Note

Unlike createChart(), the component does not expose skipLicenseValidation — license validation is always performed, so a valid licenseKey is required (use the demo key for evaluation).

🎛️ Imperative Access via Ref

Forward a ref to access the imperative chart instance — the same methods as the object returned by createChart() (setSymbol, setInterval, addIndicator, setTimezone, applyTemplate, setBrokerAccounts, …). See the Chart API for the full method reference.

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

Alternatively, capture the instance from onReady:

<GoCharting
	symbol="NASDAQ:AAPL"
	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);
	}}
/>

🆚 <GoCharting /> vs createChart()

Aspect<GoCharting />createChart()
StyleDeclarative (JSX)Imperative (function call)
LifecycleManaged by React (unmount cleans up)You must call chart.destroy()
Imperative methodsVia ref or onReady instanceVia the returned ChartInstance
ContainerRenders where mountedRequires an HTMLElement or selector
Config surfaceSame options as propsSame options in the config object
Best forReact applicationsVanilla JS, non-React frameworks

🔗 Related Documentation

For a complete React integration walkthrough, see the React example.

Last updated on
Chart APIChart Widget