Configuration API

Pass a ChartConfig object to createChart() (or as props on <GoCharting />). Nested objects map to typed shapes such as TradingConfig and ExcludeOptions.

Quick example


import { createChart } from "@gocharting/chart-sdk";
 
const chart = createChart("#chart-container", {
	symbol: "BYBIT:FUTURE:BTCUSDT",
	interval: "1m",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
 
	theme: "dark",
	disableSearch: false,
	disableCompare: false,
 
	trading: {
		enableTrading: true,
		showOpenOrders: true,
		showPositions: true,
		supportStopOrders: true,
		supportStopLimitOrders: true,
	},
 
	appCallback: (event) => {
		console.log(event.eventType, event.message);
	},
	onReady: (chartInstance) => {
		console.log("ready", chartInstance);
	},
	onError: (error) => {
		console.error(error);
	},
});

`ChartConfig` at a glance

Canonical field list: Types → ChartConfig. Summary of applied options:

Group	Fields	Types
Required	`datafeed`, `symbol`, `interval`, `licenseKey`	`Datafeed`
Display	`theme`, `themeColor`, `locale`, `autosize`, `width`, `height`	—
Chrome flags	`disableSearch`, `disableCompare`, `hideDrawingToolBar`, `exclude`	`ExcludeOptions`
Trading	`trading`	`TradingConfig`
Construct features (P4)	`disabled_features`, `enabled_features`, `overrides`, `studies_overrides`, `settings_overrides`, `custom_css_url`, `custom_themes`, `timezone`, `toolbar_bg`, `time_frames`, `timeframe`, `favorites` / `favourite`	—
Construct chrome	`loading_screen`, `custom_font_family`, `compare_symbols`, `symbol_search_symbols_types`, `custom_timezones`, `custom_translate_function`, `header_widget_buttons_mode`, `additional_symbol_info_fields`	—
Construct hooks	`symbol_search_complete`, `save_chart_to_server_callback`, `suggested_chart_change_adapter`, `context_menu.items_processor`, `context_menu.renderer_factory`	—
Persistence	`autoSave`, `auto_save_delay`, `save_load_adapter`, `load_last_chart`, `saved_data`, `snapshot_url`, `image_storage_adapter`	—
Mobile	`isNativeApp`, `touchMode`	—
Overrides	`defaultInitialChartConfig`, `contextMenu`, `popups`, `favourite`	`DefaultInitialChartConfig`, `ContextMenuOptions`, `PopupsConfig`, `FavouriteConfig`
Callbacks	`appCallback`, `onReady`, `onError`	Events

Note

Options that are accepted but not applied yet are omitted here (same policy as other API pages). Prefer the types file for the full TypeScript surface.

Required options

Option	Type	Description
`datafeed`	`Datafeed`	Bars, resolve, optional search / ticks / marks
`symbol`	`string`	Initial symbol (e.g. `"BYBIT:FUTURE:BTCUSDT"`)
`interval`	`string`	Initial interval (e.g. `"1m"`, `"1D"`)
`licenseKey`	`string`	SDK license key (unless `skipLicenseValidation: true`)

Display

`theme` / `themeColor`

theme: "light" | "dark" (default "light"). Maps to #ffffff / #22292f when themeColor is omitted.
themeColor: any hex background (e.g. "#570f0f"). You may pass hex alone — do not also force theme: "light" unless you want the named mode.


theme: "dark",
// or
themeColor: "#1a1a1a",

See Themes. Interactive lab: examples/themes-lab.html.

`autosize` / `width` / `height` / `locale`

Option	Default	Notes
`autosize`	`true`	AutoFit responsive sizing
`width` / `height`	`"100%"`	Number (px) or CSS length
`locale`	`"en-US"`	UI translation locale

Chrome flags

`disableSearch` / `disableCompare` / `hideDrawingToolBar`

Option	Default	Effect
`disableSearch`	`false`	Hide top-bar symbol search
`disableCompare`	`false`	Hide Compare control
`hideDrawingToolBar`	`false`	Hide left drawing toolbar


disableSearch: true,
disableCompare: true,
hideDrawingToolBar: true,

`exclude`

Type: ExcludeOptions

Hide chrome regions or indicators at construct time:


exclude: {
	leftPanel: true,
	rightPanel: true,
	drawingToolbar: true,
	indicators: ["SMA", "EMA"],
},

Runtime toggles also exist via chart.features() — see Chart API.

Trading — `trading`

Type: TradingConfig


trading: {
	enableTrading: true,
	showOpenOrders: true,
	showPositions: true,
	showExecutions: true,
	showNotifications: true,
	showReverseButton: true,
	beep: true,
	quickTradeMode: false,
	supportStopOrders: true,
	supportStopLimitOrders: true,
	enableTakeProfitDefaults: true,
	defaultTakeProfitSpread: 10,
	defaultTakeProfitSpreadType: "tick",
	enableStopLossDefaults: true,
	defaultStopLossSpread: 5,
	defaultStopLossSpreadType: "tick",
	boxAlignment: "right",
	lineCategory: "extended",
},

Notes:

Gate is trading.enableTrading (default false).
Orders/positions need broker data via setBrokerAccounts() — see Trading.
Handle UI actions with appCallback (PLACE_ORDER, MODIFY_ORDER, …).
supportStopOrders / supportStopLimitOrders also require broker orderConfig support for stop types.

Minimal enable:


trading: { enableTrading: true },

Construct-time features (Phase 4)

Apply once at createChart. Prefer these for initial chrome; use runtime features() / applyOverrides() for later changes.

`disabled_features` / `enabled_features`

TV-style featuresets mapped onto GC chrome (exclude, disableSearch, disableCompare, hideDrawingToolBar, …). enabled_features runs after disabled_features.


disabled_features: ["header_symbol_search", "left_toolbar", "header_compare"],
enabled_features: ["header_compare"], // re-enable after disable

Lab: examples/phase4-constructor-lab.html.

`overrides` / `studies_overrides` / `settings_overrides`

Option	Merges into
`overrides`	Chart appearance (same nested GC shape as `applyOverrides`)
`studies_overrides`	Study styles keyed by indicator type
`settings_overrides`	`defaultInitialChartConfig.settings`


overrides: {
	appearance: { backgroundColor: "#0f1419" },
},
studies_overrides: {
	EMA: { appearance: { strokeStyle: "#3d8bfd" } },
},
settings_overrides: {
	zone: "America/New_York",
},

`custom_css_url` / `custom_themes` / `toolbar_bg` / `timezone`

Option	Effect
`custom_css_url`	Inject stylesheet once (`addCustomCSSFile`)
`custom_themes`	CSS theme tokens via `customThemes()`
`toolbar_bg`	Sets toolbar CSS vars on the chart container
`timezone`	IANA zone → `settings.zone`

Construct chrome

Option	Effect
`loading_screen`	Overlay while hydrating — `{ backgroundColor?, foregroundColor?, text? }`
`custom_font_family`	CSS font family on the chart container
`compare_symbols`	Seed Compare overlays (string or `{ symbol, exchange?, … }` entries)
`symbol_search_symbols_types`	Type filter chips in symbol search (`string` or `{ name, value }` entries)
`custom_timezones`	Extra zones merged into the timezone picker
`custom_translate_function`	`(key, options, defaultMessage?) => string` wrap after intl init
`header_widget_buttons_mode`	`"fullsize"` \| `"compact"` \| `"adaptive"` top-bar density
`additional_symbol_info_fields`	Extra fields shown with symbol status / bottom bar

[!NOTE] Chart Y-axis tick labels use symbol tick_size / max_tick_precision from resolveSymbol — not a host-controlled TV pricescale. Construct numeric_formatting / custom_formatters (if present on the type surface) only affect optional host helpers and do not restyle the live price axis.


loading_screen: { backgroundColor: "#0f1419", foregroundColor: "#fff", text: "Loading…" },
custom_font_family: "IBM Plex Sans, sans-serif",
compare_symbols: ["NASDAQ:AAPL", { symbol: "MSFT", exchange: "NASDAQ" }],
symbol_search_symbols_types: ["stock", { name: "Crypto", value: "crypto" }],
header_widget_buttons_mode: "compact",

Construct hooks

Option	Effect
`symbol_search_complete`	Called after a successful symbol pick from search
`save_chart_to_server_callback`	Called when a named layout save completes
`suggested_chart_change_adapter`	`{ canAcceptSuggestedChange, onSuggestedChange? }` — gate `setSymbol` / `setInterval`
`context_menu.items_processor`	Post-process context-menu items before show
`context_menu.renderer_factory`	Replace the item list (not full custom React trees)


symbol_search_complete: (symbol) => console.log("picked", symbol),
save_chart_to_server_callback: (meta) => console.log("saved", meta),
suggested_chart_change_adapter: {
	canAcceptSuggestedChange: ({ type }) => type !== "symbol" || confirm("Change symbol?"),
},
context_menu: {
	items_processor: (items) => items.filter((i) => i.label !== "Hide"),
},

`time_frames` / `timeframe` / `favorites`

Option	Effect
`time_frames`	Filter intervals exposed by `getIntervals` / picker
`timeframe`	After init, `activeChart().setTimeFrame(...)`
`favorites`	TV-shaped favorites mapped onto GC `FavouriteConfig`

Persistence

Two different mechanisms:

Option	What it does
`autoSave`	Persist chart UI state to `sessionStorage` (tab-scoped; default `true`)
`auto_save_delay`	Debounce (seconds, default `5`) before widget event `onAutoSaveNeeded` — host should call `saveChartToServer` / your adapter


autoSave: false, // you own layout state
auto_save_delay: 2,
save_load_adapter: mySaveLoadAdapter,
load_last_chart: true,
// or
saved_data: layoutBlob, // wins over load_last_chart
snapshot_url: "https://example.com/upload-screenshot",

Option	Notes
`save_load_adapter`	Named chart / study-template persistence (Phase 5)
`load_last_chart`	After init, load newest chart from adapter
`saved_data`	Layout blob (or JSON string) applied after hydrate
`snapshot_url`	POST target for `takeScreenshot()` (multipart `preparedImage`)
`image_storage_adapter`	Preferred over `snapshot_url` when both are set
`client_id` / `user_id`	Optional storage scoping

Subscribe: chart.subscribe("onAutoSaveNeeded", …) — see Events. Lab: examples/phase5-persistence-lab.html.

Mobile / WebView

Option	Default	Behavior
`isNativeApp`	`false`	Mobile canvas; hide JS top/bottom bars; suppress JS context menu → `OPEN_CONTEXT_MENU`; bridge via `sendToNative`
`touchMode`	`false`	Full JS mobile Chart-tab chrome (bars + menus), not the full TerminalMobile app


isNativeApp: true,
appCallback: (event) => {
	// Single event object — also posted to the native bridge
	console.log(event.eventType, event.message);
},

Guides: Mobile WebView, Mobile Integration (includes a Desktop/Mobile touchMode true vs false compare lab).

Nested overrides

`defaultInitialChartConfig`

Type: DefaultInitialChartConfig

Deep-merge into initial chart settings / appearance:


defaultInitialChartConfig: {
	settings: {
		showCrosshairPlusIcon: false,
		zone: "America/New_York",
	},
},

showCrosshairPlusIcon at the top level of ChartConfig is equivalent to defaultInitialChartConfig.settings.showCrosshairPlusIcon.

`contextMenu`

Type: ContextMenuOptions
Alias: context_menu.


contextMenu: { showTradingOptions: true },

`popups`

Type: PopupsConfig

Panel state overrides keyed by panel id (TradingPanel, Settings, Layers, …) — not welcome/tutorial flags.


popups: {
	TradingPanel: { title: "Order Ticket" },
	Settings: { visible: false },
},

`favourite`

Type: FavouriteConfig


favourite: {
	INTERVALS: ["1m", "5m", "1D"],
	DRAWINGS: ["trendline", "rectangle"],
	INDICATOR: ["RSI", "MACD"],
},

Callbacks & misc flags

Option	Default	Notes
`appCallback`	—	Single `AppCallbackEvent` object — see Events
`onReady`	—	Chart instance ready for API calls
`onError`	—	Construct / fatal errors
`debugLog`	`false`	Verbose SDK console logs
`skipLicenseValidation`	`false`	Demo only — skip `licenseKey` requirement
`alwaysDrawMode`	`false`	Keep drawing tool armed after place

Type Definitions — ChartConfig, TradingConfig, and nested shapes
Chart API — runtime methods (applyOverrides, features, save/load)
Events — appCallback, onAutoSaveNeeded, subscribe
Themes — theme / themeColor / setTheme
Trading — broker book + order events
Framework integrations — sample apps

Labs: phase4-constructor-lab.html, tv-parity-construct-lab.html, phase5-persistence-lab.html, themes-lab.html.

Configuration API

Quick example

ChartConfig at a glance

Required options

Display

theme / themeColor

autosize / width / height / locale

Chrome flags

disableSearch / disableCompare / hideDrawingToolBar

exclude

Trading — trading

Construct-time features (Phase 4)

disabled_features / enabled_features

overrides / studies_overrides / settings_overrides

custom_css_url / custom_themes / toolbar_bg / timezone