Skip to Content
TutorialsQuick Start

Quick Start Guide

Get your first GoCharting SDK chart running in under 5 minutes with built-in AutoFit!

Live Examples

Try these working examples right now:

Interactive Embedded Demos - Try our charts directly in your browser!

CodePen Basic: https://codepen.io/Admin-GoCharting/pen/myRjBEr  CodePen Advanced: https://codepen.io/Admin-GoCharting/pen/vEKdyBW 

Prerequisites

  • Node.js 16+ (for NPM installation)
  • Modern web browser (Chrome 80+, Firefox 75+, Safari 13+, Edge 80+)
  • Basic knowledge of JavaScript/TypeScript

Step 1: Installation

Choose your preferred installation method:

npm install @gocharting/chart-sdk

Option B: CDN

<!-- Load GoCharting SDK -->
<script src="https://gocharting.com/sdk/library/demo-550e8400-e29b-41d4-a716-446655440000/index.umd.js"></script>

Option C: Download

Download the SDK files and host them on your server:

Step 2: Basic HTML Setup

Create an HTML file with a container for the chart:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>My Trading Chart</title>
		<style>
			body {
				margin: 0;
				padding: 20px;
				font-family: Arial, sans-serif;
			}
			#chart-container {
				width: 100%;
				height: 600px;
				border: 1px solid #ddd;
				border-radius: 8px;
				/* No additional CSS needed - AutoFit is built-in! */
			}
		</style>
	</head>
	<body>
		<h1>My Trading Application</h1>
		<div id="chart-container"></div>
 
		<!-- Your JavaScript will go here -->
		<script src="app.js"></script>
	</body>
</html>

Step 3: Create Your Datafeed

Create a simple datafeed object to fetch market data (composition-based approach):

// app.js
import { createChart } from "@gocharting/chart-sdk";
 
// Create your datafeed object (no inheritance needed!)
const myDatafeed = {
	// Required method: Fetch historical bars
	async getBars(symbolInfo, resolution, periodParams) {
		const { from, to } = periodParams;
 
		try {
			// Example: Fetch from your API (replace with your data source)
			const response = await fetch(
				`https://your-api.com/bars?symbol=${symbolInfo.ticker}&from=${from}&to=${to}&interval=${resolution}`
			);
			const data = await response.json();
 
			return {
				bars: data.map((bar) => ({
					time: bar.timestamp * 1000, // Convert to milliseconds
					open: bar.open,
					high: bar.high,
					low: bar.low,
					close: bar.close,
					volume: bar.volume,
				})),
			};
		} catch (error) {
			console.error("Failed to fetch bars:", error);
			// Return sample data for demo
			return getSampleData(symbolInfo, from, to);
		}
	},
 
	// Required method: Resolve symbol information
	resolveSymbol(symbolName, onResolve, onError) {
		try {
			// "NASDAQ:AAPL" or "BYBIT:FUTURE:BTCUSDT"
			const parts = symbolName.split(":");
			const exchange = parts[0] || "NASDAQ";
			const symbol = parts[parts.length - 1];
			const segment = parts.length >= 3 ? parts[1] : "EQUITY";
			const name = `${symbol} Stock`;
			const validIntervals = ["1m", "5m", "15m", "30m", "1h", "1D"];
 
			// GoCharting security / SymbolInfo shape
			const symbolInfo = {
				exchange,
				segment,
				symbol,
				name,
				asset_type: "EQUITY",
				source_id: symbol,
				tradeable: true,
				is_index: false,
				is_formula: false,
				delay_seconds: 0,
				data_status: "streaming",
				contract_size: 1,
				tick_size: 0.01,
				display_tick_size: 0.01,
				volume_size_increment: 1,
				max_tick_precision: 2,
				max_volume_precision: 0,
				quote_currency: "USD",
				supports: { footprint: false },
				exchange_info: {
					name: exchange.toLowerCase(),
					code: exchange,
					country_cd: "US",
					zone: "America/New_York",
					has_unique_trade_id: true,
					holidays: null,
					hours: [
						{ open: false },
						{ open: true },
						{ open: true },
						{ open: true },
						{ open: true },
						{ open: true },
						{ open: false },
					],
					contains_ambiguous_symbols: false,
					valid_intervals: validIntervals,
				},
				ticker: symbol,
				full_name: `${exchange}:${segment}:${symbol}`,
				description: name,
				type: "stock",
				session: "0930-1600",
				session_label: "0930-1600",
				timezone: "America/New_York",
				has_intraday: true,
				has_daily: true,
				supported_resolutions: validIntervals,
			};
 
			onResolve(symbolInfo);
		} catch (error) {
			onError("Symbol not found");
		}
	},
 
	// Required method: Search for symbols
	searchSymbols(userInput, exchange, symbolType, onResultReadyCallback) {
		// Return sample symbols for demo
		const symbols = [
			{
				symbol: "AAPL",
				full_name: "NASDAQ:AAPL",
				description: "Apple Inc.",
				exchange: "NASDAQ",
				ticker: "AAPL",
				type: "stock",
				key: "NASDAQ:AAPL", // REQUIRED: Unique key for symbol resolution and compare functionality
			},
			{
				symbol: "MSFT",
				full_name: "NASDAQ:MSFT",
				description: "Microsoft Corporation",
				exchange: "NASDAQ",
				ticker: "MSFT",
				type: "stock",
				key: "NASDAQ:MSFT", // REQUIRED: Unique key for symbol resolution and compare functionality
			},
			{
				symbol: "GOOGL",
				full_name: "NASDAQ:GOOGL",
				description: "Alphabet Inc.",
				exchange: "NASDAQ",
				ticker: "GOOGL",
				type: "stock",
				key: "NASDAQ:GOOGL", // REQUIRED: Unique key for symbol resolution and compare functionality
			},
		].filter(
			(s) =>
				s.symbol.toLowerCase().includes(userInput.toLowerCase()) ||
				s.description.toLowerCase().includes(userInput.toLowerCase())
		);
 
		// Deliver results as an object: { searchInProgress, items }
		onResultReadyCallback({ searchInProgress: false, items: symbols });
	},
 
	// Optional method: Add time marks (chart events).
	// Results are delivered via onDataCallback (NOT returned).
	getMarks(symbolInfo, from, to, onDataCallback, resolution) {
		const marks = [
			{
				id: 1,
				time: Math.floor(Date.now() / 1000) - 86400 * 7, // 7 days ago
				color: "red",
				text: ["Earnings Report", "Q3 2025 Results", "Beat expectations"],
				label: "E",
				labelFontColor: "white",
				minSize: 25,
			},
			{
				id: 2,
				time: Math.floor(Date.now() / 1000) - 86400 * 3, // 3 days ago
				color: "blue",
				text: "Product launch announcement",
				label: "N",
				labelFontColor: "white",
				minSize: 25,
			},
		];
 
		onDataCallback(marks);
	},
};
 
// Helper function to generate sample data for demo
function getSampleData(symbolInfo, from, to) {
	const bars = [];
	const startTime = from * 1000;
	const endTime = to * 1000;
	const interval = 24 * 60 * 60 * 1000; // 1 day
 
	let currentTime = startTime;
	let price = 100 + Math.random() * 50; // Random starting price
 
	while (currentTime <= endTime) {
		const change = (Math.random() - 0.5) * 4; // Random price change
		const open = price;
		const close = price + change;
		const high = Math.max(open, close) + Math.random() * 2;
		const low = Math.min(open, close) - Math.random() * 2;
		const volume = Math.floor(Math.random() * 1000000) + 100000;
 
		bars.push({
			time: currentTime,
			open: open,
			high: high,
			low: low,
			close: close,
			volume: volume,
		});
 
		price = close;
		currentTime += interval;
	}
 
	return { bars };
}

Step 4: Initialize the Chart

Create and configure your chart with automatic sizing:

// Initialize the chart with built-in AutoFit
function initChart() {
	//  Create chart with simplified API (built-in AutoFit enabled by default)
	const chart = createChart("#chart-container", {
		datafeed: myDatafeed,
		symbol: "NASDAQ:AAPL",
		interval: "1D",
		licenseKey: "demo-550e8400-e29b-41d4-a716-446655440000", // Use your license key
		theme: "light",
		// autosize: true (enabled by default)
	});
 
	// createChart renders into "#chart-container" internally and
	// returns a plain API object (no ReactDOM.render needed).
 
	console.log(" Chart created with built-in AutoFit!");
	console.log(" Features enabled:");
	console.log("  - Bulletproof sizing");
	console.log("  - Responsive behavior");
	console.log("  - Smart error handling");
	console.log("  - Automatic CSS injection");
 
	return chart;
}
 
// Initialize when page loads
document.addEventListener("DOMContentLoaded", () => {
	const chart = initChart();
 
	// Make chart available globally for debugging
	window.chart = chart;
 
	console.log(" GoCharting SDK loaded with built-in AutoFit!");
});

What’s Automatic Now:

  • Perfect Sizing - Chart automatically fits any container
  • Responsive Behavior - Adapts to window resizing in real-time
  • CSS Injection - No external CSS files needed
  • Error Handling - Beautiful loading and error states
  • Cross-browser Support - Works everywhere consistently

Step 5: Test Your Implementation

  1. Open your HTML file in a web browser
  2. Check the browser console for any errors
  3. Verify the chart loads with sample data
  4. Test symbol search by typing in the symbol input
  5. Try changing intervals using the interval selector

Step 6: Connect Real Data

Replace the sample data with your actual data source:

// Swap the getBars method inside your datafeed object for a real API call
const myDatafeed = {
    async getBars(symbolInfo, resolution, periodParams) {
        const { from, to } = periodParams;
 
        // Replace with your actual API endpoint
        const response = await fetch(`https://your-api.com/bars`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer YOUR_API_KEY'
            },
            body: JSON.stringify({
                symbol: symbolInfo.ticker,
                resolution: resolution,
                from: from,
                to: to
            })
        });
 
        const data = await response.json();
 
        return {
            bars: data.bars.map(bar => ({
                time: bar.timestamp * 1000,
                open: bar.open,
                high: bar.high,
                low: bar.low,
                close: bar.close,
                volume: bar.volume
            }))
        };
    },
};

Complete Example

Here’s the complete working example:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>GoCharting SDK - Quick Start</title>
		<style>
			body {
				margin: 0;
				padding: 20px;
				font-family: Arial, sans-serif;
			}
			#chart-container {
				width: 100%;
				height: 600px;
				border: 1px solid #ddd;
			}
		</style>
	</head>
	<body>
		<h1>My Trading Chart</h1>
		<div id="chart-container"></div>
 
		<script type="module">
			import { createChart } from "@gocharting/chart-sdk";
 
			// Your myDatafeed object (from Step 3) here...
			// Your chart initialization (from Step 4) here...
		</script>
	</body>
</html>

Enable Trading Features (Optional)

Want to add trading capabilities to your chart? Simply use trading.enableTrading:

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: ({ eventType, message }) => {
		console.log("Trading event:", eventType, message);
		// Handle trading events here
	},
});

This enables:

  • Right-click context menus with Buy/Sell options
  • CrossHair trading menus when hovering over prices
  • Settings > Trading tab for trading configuration
  • Trading event callbacks for order management

Next Steps

Congratulations! You now have a working GoCharting SDK implementation. Here’s what to explore next:

  1. Configuration Guide - Customize chart appearance and behavior
  2. Trading Integration - Add real trading capabilities
  3. Production Deployment - Deploy to production

Troubleshooting

Common Issues

Chart doesn’t load:

  • Check browser console for errors
  • Verify license key is correct
  • Ensure all dependencies are loaded

No data displayed:

  • Check getBars method implementation
  • Verify data format matches requirements
  • Check network requests in browser dev tools

Symbol search not working:

  • Implement searchSymbols method
  • Check symbol format (EXCHANGE:SYMBOL)
  • Verify API responses
  • IMPORTANT: Ensure each search result includes a key property for compare functionality

Compare symbols not working:

  • Verify search results include key property (e.g., "BYBIT:FUTURE:ETHUSDT")
  • Check that resolveSymbol method can handle the key values
  • Ensure getBars method works with resolved symbol objects

Getting Help

Ready to build something amazing? Let’s get started!

Last updated on
IntroductionBasic Integration