Configuration Guide

Complete reference for configuring the GoCharting SDK to meet your application’s needs.

Basic Configuration

Required Parameters


const chart = GoChartingSDK.createChart("#chart-container", {
	// Required parameters
	datafeed: myDatafeed, // Your data provider
	symbol: "NASDAQ:AAPL", // Initial symbol
	interval: "1D", // Initial interval
	licenseKey: "YOUR_KEY", // Your license key
});

Optional Parameters

Parameter	Type	Default	Description
`theme`	`string`	`light`	Chart theme (‘light’ or ‘dark’)
`autosize`	`boolean`	`true`	Enable automatic sizing
`width`	`number \| string`	`100%`	Chart width (overridden by autosize)
`height`	`number \| string`	`100%`	Chart height (overridden by autosize)
`autoSave`	`boolean`	`true`	Auto-save chart state to sessionStorage for refresh persistence
`touchMode`	`boolean`	`false`	Force full JS mobile Chart-tab shell (bars + ContextMenu)
`isNativeApp`	`boolean`	`false`	Native WebView: hide JS bars; emit `OPEN_CONTEXT_MENU`

Native WebViews: see Mobile Integration for the sendToNative bridge and platform snippets.

Trading Configuration

Enable Trading Features

The trading.enableTrading parameter controls whether trading functionality is available in the chart:


const chart = GoChartingSDK.createChart("#chart-container", {
	symbol: "BYBIT:FUTURE:BTCUSDT",
	interval: "1m",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	trading: {
		enableTrading: true, //  Enable trading features
	},
	appCallback: handleTradingEvents,
});

Trading Features Enabled

When trading.enableTrading: true, the following features become available:

Right-click on chart → Buy/Sell options appear
Hover over price levels → Trading options in CrossHair menu

Settings Panel

Settings > Trading tab → Trading configuration options
Configure order display, notifications, and defaults

Event Callbacks

Trading events → Handled through appCallback parameter
Order placement, cancellation, and modification events

Trading Event Handler


function handleTradingEvents({ eventType, message, onClose }) {
	switch (eventType) {
		case "PLACE_ORDER":
			console.log("Place order:", message);
			// { symbol, side, quantity, price, orderType }
			break;
 
		case "CANCEL_ORDER":
			console.log("Cancel order:", message);
			// { orderId, symbol }
			break;
 
		case "MODIFY_ORDER":
			console.log("Modify order:", message);
			// { orderId, quantity, price }
			break;
	}
}

Theme Configuration

Light Theme (Default)


const chart = GoChartingSDK.createChart("#chart-container", {
	// ... other config
	theme: "light",
});

Dark Theme


const chart = GoChartingSDK.createChart("#chart-container", {
	// ... other config
	theme: "dark",
});

Sizing Configuration

AutoFit (Recommended)


const chart = GoChartingSDK.createChart("#chart-container", {
	// ... other config
	autosize: true, // Default - automatically fits container
});

Fixed Dimensions


const chart = GoChartingSDK.createChart("#chart-container", {
	// ... other config
	autosize: false,
	width: 800,
	height: 600,
});

Event Handling

Chart Ready Callback


const chart = GoChartingSDK.createChart("#chart-container", {
	// ... other config
	onReady: (chartInstance) => {
		console.log("Chart is ready!", chartInstance);
		// Chart is fully loaded and interactive
	},
});

Error Handling


const chart = GoChartingSDK.createChart("#chart-container", {
	// ... other config
	onError: (error) => {
		console.error("Chart error:", error);
		// Handle chart initialization errors
	},
});