Skip to Content
GuidesInstallation

Installation Guide

Complete installation guide for GoCharting SDK across different environments and frameworks.

System Requirements

Minimum Requirements

  • Node.js: 16.0.0 or higher (for NPM installation)
  • Browsers: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
  • Memory: 512MB available RAM
  • Network: Stable internet connection for real-time data
  • Node.js: 18.0.0 LTS or higher
  • Memory: 1GB+ available RAM
  • Network: Low-latency connection for trading applications

Installation Methods

Install via package manager for modern JavaScript applications:

npm install @gocharting/chart-sdk

Install peer dependencies:

npm install react react-dom

luxon ships bundled with the SDK — you do not need to install it separately.

Usage:

import { createChart } from "@gocharting/chart-sdk";

Method 2: CDN (Quick Start)

Load directly from CDN for rapid prototyping:

<!DOCTYPE html>
<html>
	<head>
		<title>GoCharting SDK</title>
	</head>
	<body>
 
		<!-- Load GoCharting SDK -->
		<script src="https://gocharting.com/sdk/library/demo-550e8400-e29b-41d4-a716-446655440000/index.umd.js"></script>
 
		<script>
			// SDK available as window.GoChartingSDK
			const { createChart } = window.GoChartingSDK;
		</script>
	</body>
</html>

Method 3: Download and Self-Host

Download and host the SDK files yourself:

  1. Download: Latest Release 
  2. Extract: Unzip to your project directory
  3. Include: Add script tags to your HTML
<!-- Self-hosted version -->
<script src="https://gocharting.com/sdk/library/index.umd.js"></script>

Framework-Specific Installation

React Applications

Create React app (if needed):

npx create-react-app my-trading-app
cd my-trading-app

Install GoCharting SDK:

npm install @gocharting/chart-sdk

Install additional dependencies:

npm install axios luxon

TypeScript Support:

npm install -D @types/react @types/react-dom

Next.js Applications

Create Next.js app (if needed):

npx create-next-app@latest my-trading-app
cd my-trading-app

Install GoCharting SDK:

npm install @gocharting/chart-sdk

Configure for SSR:

npm install dynamic-import-polyfill

Next.js Configuration:

// next.config.js
module.exports = {
	webpack: (config) => {
		config.resolve.fallback = {
			...config.resolve.fallback,
			fs: false,
		};
		return config;
	},
	transpilePackages: ["@gocharting/chart-sdk"],
};

License Key Setup

Obtaining License Keys

  1. Demo License: Use demo-550e8400-e29b-41d4-a716-446655440000 (no registration required)
  2. Professional License: Purchase at gocharting.com/pricing 
  3. Enterprise License: Contact sales@gocharting.com

Environment Variables

Set up environment variables for different environments:

# .env.development
REACT_APP_GOCHARTING_LICENSE=demo-550e8400-e29b-41d4-a716-446655440000
REACT_APP_API_BASE_URL=http://localhost:3001
 
# .env.production
REACT_APP_GOCHARTING_LICENSE=PROF-YOUR-PRODUCTION-KEY
REACT_APP_API_BASE_URL=https://api.yourcompany.com

Configuration Files

// config/gocharting.js
const config = {
	development: {
		licenseKey: "demo-550e8400-e29b-41d4-a716-446655440000",
		apiBaseUrl: "http://localhost:3001",
	},
	production: {
		licenseKey: process.env.GOCHARTING_LICENSE_KEY,
		apiBaseUrl: process.env.API_BASE_URL,
	},
};
 
export default config[process.env.NODE_ENV || "development"];

Build Configuration

Webpack Configuration

// webpack.config.js
module.exports = {
	resolve: {
		alias: {
			"@gocharting/chart-sdk": path.resolve(
				__dirname,
				"node_modules/@gocharting/chart-sdk/dist"
			),
		},
	},
	externals: {
		// Use external React for better bundle optimization
		react: "React",
		"react-dom": "ReactDOM",
	},
	optimization: {
		splitChunks: {
			cacheGroups: {
				gocharting: {
					test: /[\\/]node_modules[\\/]@gocharting[\\/]chart-sdk[\\/]/,
					name: "gocharting",
					chunks: "all",
				},
			},
		},
	},
};

Vite Configuration

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
 
export default defineConfig({
	plugins: [react()],
	build: {
		rollupOptions: {
			external: ["react", "react-dom"],
			output: {
				globals: {
					react: "React",
					"react-dom": "ReactDOM",
				},
			},
		},
	},
	optimizeDeps: {
		include: ["@gocharting/chart-sdk"],
	},
});

Rollup Configuration

// rollup.config.js
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";
 
export default {
	input: "src/index.js",
	output: {
		file: "dist/bundle.js",
		format: "umd",
		name: "MyTradingApp",
		globals: {
			react: "React",
			"react-dom": "ReactDOM",
			"@gocharting/chart-sdk": "GoChartingSDK",
		},
	},
	external: ["react", "react-dom", "@gocharting/chart-sdk"],
	plugins: [resolve(), commonjs(), terser()],
};

Verification

Installation Verification

Create a simple test to verify installation:

// test-installation.js
import { createChart } from "@gocharting/chart-sdk";
 
console.log("GoCharting SDK loaded successfully!");
console.log("createChart:", typeof createChart);
 
// Test basic instantiation
try {
	const chart = createChart(document.createElement("div"), {
		symbol: "TEST:SYMBOL",
		interval: "1D",
		licenseKey: "demo-550e8400-e29b-41d4-a716-446655440000",
		datafeed: {
			getBars: async () => ({ bars: [], meta: { noData: true } }),
			resolveSymbol: (symbolName, onResolve) =>
				onResolve((() => {
				const parts = String(symbolName).split(":");
				const exchange = parts[0] || "NASDAQ";
				const symbol = parts[parts.length - 1];
				return {
					exchange,
					segment: "EQUITY",
					symbol,
					name: symbol,
					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,
						zone: "America/New_York",
						hours: Array.from({ length: 7 }, () => ({ open: true })),
						valid_intervals: ["1m", "5m", "15m", "1h", "1D"],
					},
					ticker: symbol,
					full_name: `${exchange}:EQUITY:${symbol}`,
					description: symbol,
					type: "stock",
					session: "0930-1600",
					timezone: "America/New_York",
					has_intraday: true,
					has_daily: true,
					supported_resolutions: ["1m", "5m", "15m", "1h", "1D"],
				};
			})()),
			searchSymbols: (userInput, exchange, symbolType, onResult) =>
				onResult({ searchInProgress: false, items: [] }),
		},
	});
	console.log(" SDK installation verified");
} catch (error) {
	console.error(" SDK installation failed:", error);
}

Browser Console Test

Open browser console and run:

// Check if SDK is loaded
console.log("GoCharting SDK:", window.GoChartingSDK);
 
// Test basic functionality
if (window.GoChartingSDK) {
	const { createChart } = window.GoChartingSDK;
	console.log(" SDK available globally");
} else {
	console.error(" SDK not loaded");
}

Troubleshooting

Common Issues

1. Module not found error

Error: Cannot resolve module '@gocharting/chart-sdk'

Solution:

# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install

2. React version conflicts

Error: Multiple versions of React detected

Solution:

npm install react@18.2.0 react-dom@18.2.0 --exact

3. Build errors with bundlers

Error: Cannot resolve 'fs' module

Solution:

// Add to webpack config
resolve: {
  fallback: {
    "fs": false,
    "path": false
  }
}

4. License key errors

Error: Invalid license key

Solution:

  • Verify license key format
  • Check domain restrictions
  • Ensure key is not expired

Getting Help

If you encounter issues:

  1. Check Documentation: gocharting.com/sdk/docs 
  2. Search Issues: github.com/GoChartingInc/gocharting-sdk-demo/issues 
  3. Community Support: gocharting.com/discord 
  4. Email Support: support@gocharting.com

Next Steps

After successful installation:

  1. Quick Start Guide - Build your first chart
  2. API Reference - Explore available methods
  3. Examples - See framework-specific implementations
  4. Configuration - Customize chart behavior

Installation complete? Let’s build something amazing!

Last updated on
Streaming implementationConfiguration