⚙️ Configuration API

The Configuration API provides comprehensive control over chart behavior, appearance, and features through the ChartConfig object passed to createChart().

📋 ChartConfig Interface

The ChartConfig object is passed to createChart() and contains all configuration options for the chart.


import { createChart, ChartConfig } from "@gocharting/chart-sdk";
 
const config: ChartConfig = {
	// Required properties
	datafeed: myDatafeed,
	symbol: "AAPL",
	interval: "1D",
	licenseKey: "YOUR_LICENSE_KEY",
 
	// Display options
	theme: "dark",
	themeColor: "#1a1a1a",
	autosize: true,
	width: "100%",
	height: "100%",
	locale: "en-US",
 
	// Feature flags
	debugLog: false,
	disableSearch: false,
	disableCompare: false,
	hideDrawingToolBar: false,
	alwaysDrawMode: false,
	autoSave: true,
 
	// Configuration overrides
	defaultInitialChartConfig: {
		settings: {
			showCrosshairPlusIcon: false,
			zone: "America/New_York",
		},
	},
	trading: {
		enableTrading: true,
		showOpenOrders: true,
		showPositions: true,
	},
	contextMenu: {
		showTradingOptions: true, // Show Buy/Sell in context menu
	},
	popups: {
		showWelcome: false,
		showTutorial: false,
	},
	favourite: {
		symbols: ["AAPL", "GOOGL", "MSFT"],
	},
 
	// UI customization
	exclude: {
		leftPanel: false,
		rightPanel: false,
		topBar: false,
	},
 
	// Event callbacks
	appCallback: ({ eventType, message, onClose }) => {
		console.log("Event:", eventType, message);
	},
	onReady: (chartInstance) => {
		console.log("Chart ready");
	},
	onError: (error) => {
		console.error("Error:", error);
	},
};
 
const chart = createChart("#chart", config);

📚 Configuration Properties

Required Properties

`datafeed`

Type: Datafeed

Your datafeed implementation that provides market data to the chart.


const config = {
	datafeed: myDatafeed, // Must implement Datafeed interface
	// ... other required properties
};

See Datafeed API for complete implementation details.

`symbol`

Type: string

Initial symbol to display (e.g., “AAPL”, “BYBIT:FUTURE:BTCUSDT”).


const config = {
	symbol: "AAPL", // Stock symbol
	symbol: "BYBIT:FUTURE:BTCUSDT", // Crypto futures
	// ... other properties
};

`interval`

Type: string

Initial time interval (e.g., “1m”, “5m”, “1H”, “1D”).


const config = {
	interval: "1D", // Daily
	interval: "1H", // Hourly
	interval: "5m", // 5 minutes
	// ... other properties
};

Supported intervals: "1m", "5m", "15m", "30m", "1H", "4H", "1D", "1W", "1M"

`licenseKey`

Type: string

Your SDK license key.


const config = {
	licenseKey: "YOUR_LICENSE_KEY",
	// ... other properties
};

Display Options

`theme`

Type: "light" | "dark" Default: "light"

Chart theme.


const config = {
	theme: "dark", // Dark theme
	theme: "light", // Light theme
	// ... other properties
};

`themeColor`

Type: string Default: undefined

Theme color for chart background (e.g., “dark”, “#1a1a1a”).


const config = {
	themeColor: "#1a1a1a", // Custom dark background
	// ... other properties
};

`autosize`

Type: boolean Default: true

Enable automatic resizing.


const config = {
	autosize: true, // Auto-resize with container
	// ... other properties
};

`width`

Type: number | string Default: "100%"

Chart width - number in pixels or string with units.


const config = {
	width: 800, // 800px
	width: "100%", // Full width
	width: "50vw", // 50% of viewport width
	// ... other properties
};

`height`

Type: number | string Default: "100%"

Chart height - number in pixels or string with units.


const config = {
	height: 600, // 600px
	height: "100%", // Full height
	height: "80vh", // 80% of viewport height
	// ... other properties
};

`locale`

Type: string Default: "en-US"

Locale for internationalization (e.g., “en-US”, “en”).


const config = {
	locale: "en-US", // English (US)
	locale: "en", // English
	// ... other properties
};