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

Usage:

import { createChart, DataProvider } 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="/path/to/gocharting-sdk.min.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-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-sdk": path.resolve(
				__dirname,
				"node_modules/gocharting-sdk/dist"
			),
		},
	},
	externals: {
		// Use external React for better bundle optimization
		react: "React",
		"react-dom": "ReactDOM",
	},
	optimization: {
		splitChunks: {
			cacheGroups: {
				gocharting: {
					test: /[\\/]node_modules[\\/]gocharting-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-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-sdk": "GoChartingSDK",
		},
	},
	external: ["react", "react-dom", "gocharting-sdk"],
	plugins: [resolve(), commonjs(), terser()],
};

🔍 Verification

Installation Verification

Create a simple test to verify installation:

// test-installation.js
import { createChart, DataProvider } from "@gocharting/chart-sdk";
 
console.log("GoCharting SDK loaded successfully!");
console.log("createChart:", typeof createChart);
console.log("DataProvider:", typeof DataProvider);
 
// Test basic instantiation
try {
	const chart = createChart(document.createElement("div"), {
		symbol: "TEST:SYMBOL",
		interval: "1D",
		licenseKey: "demo-550e8400-e29b-41d4-a716-446655440000",
		datafeed: {
			getBars: () => ({ bars: [], meta: { noData: true } }),
			resolveSymbol: (symbolName, onResolve) =>
				onResolve({ ticker: symbolName }),
			searchSymbols: (userInput, callback) => callback([]),
		},
	});
	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 { ProfessionalChart } = 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-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/gocharting/sdk/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
Advanced FeaturesConfiguration