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/GgpVepq  CodePen Advanced: https://codepen.io/Admin-GoCharting/pen/xbwvBbe 

📋 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 ✨ NEW APPROACH

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 {
			// Parse symbol (e.g., "NASDAQ:AAPL")
			const [exchange, ticker] = symbolName.split(":");
 
			const symbolInfo = {
				name: symbolName,
				full_name: symbolName,
				description: `${ticker} Stock`,
				type: "stock",
				session: "0930-1600",
				session_label: "0930-1600",
				timezone: "America/New_York",
				ticker: ticker,
				exchange: exchange || "NASDAQ",
				has_intraday: true,
				has_daily: true,
				supported_resolutions: ["1", "5", "15", "30", "60", "1D"],
				// Price precision (SDK calculates pricescale internally)
				max_tick_precision: 2,
				tick_size: 0.01,
				display_tick_size: 0.01,
				exchange_info: {
					name: exchange || "NASDAQ",
					code: exchange || "NASDAQ",
					country_cd: "US",
					zone: "America/New_York",
					has_unique_trade_id: true,
					holidays: null,
					hours: [{ open: true }, { open: true }],
				},
			};
 
			setTimeout(() => onResolve(symbolInfo), 100);
		} catch (error) {
			onError("Symbol not found");
		}
	},
 
	// Required method: Search for symbols
	searchSymbols(userInput, exchange, symbolType, onResultReadyCallback) {
		// Handle both calling patterns (2 params vs 4 params)
		const callback =
			typeof exchange === "function" ? exchange : 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
				type: "stock",
			},
		].filter(
			(s) =>
				s.symbol.toLowerCase().includes(userInput.toLowerCase()) ||
				s.description.toLowerCase().includes(userInput.toLowerCase())
		);
 
		if (typeof callback === "function") {
			callback(symbols);
		}
	},
};
 
// 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 };
}
 
// Optional: Add time marks (chart events)
async getTimeMarks(symbolInfo, from, to, resolution) {
	// Return sample time marks
	return [
		{
			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
		}
	];
}

🎯 Step 4: Initialize the Chart ✨ WITH BUILT-IN AUTOFIT

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)
	});
 
	// Render the chart
	ReactDOM.render(chart, document.getElementById("chart-container"));
 
	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:

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 {
				DataProvider,
				createChart,
			} from "./node_modules/gocharting-sdk/dist/index.esm.js";
 
			// Your SimpleDataProvider class here...
			// Your chart initialization here...
		</script>
	</body>
</html>

📈 Enable Trading Features (Optional)

Want to add trading capabilities to your chart? Simply add the enableTrading parameter:

const chart = GoChartingSDK.createChart("#chart-container", {
	symbol: "BYBIT:FUTURE:BTCUSDT",
	interval: "1m",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	enableTrading: true, // 🎯 Enable trading features
	appCallback: (eventType, eventData) => {
		console.log("Trading event:", eventType, eventData);
		// 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