GoCharting SDK Examples

Minimal, self-contained examples of integrating the GoCharting SDK with different frameworks, build tools, and data transports. Folder names match TradingView's charting-library-examples, plus extras (vanilla JS, Django, Flutter, a datafeed walkthrough). Each example is a standalone project — clone the repo, cd into the one you want, install, and run.

The GoCharting SDK is a licensed product, distributed as a compiled package — not open source. These examples are public integration templates; running them requires access to the @gocharting/chart-sdk package and a license key. See Getting the SDK.

Every example ships with a demo license key, so once you have package access they run out of the box. The web and server-rendered examples stream live market data (BYBIT BTCUSDT) over the GoCharting demo WebSocket and need network access. Bundled apps also expose window.GoChartingSDK and serve the package's /vendor/ chunks (the SDK lazy-loads icon/catalog UMDs from the page origin). The native examples ship a self-contained mock datafeed instead and run fully offline — see Native for why. Point the datafeed at your own provider once you've seen it work — see Connecting real data.

Examples

Web

Each of these wires the same ws-datafeed into its framework's lifecycle:

Example	Framework	Build tool	Notes
javascript	None (vanilla)	Vite	Smallest possible integration — one createChart call
react-typescript	React + TypeScript	Vite	Typed createChart, mount/unmount lifecycle
react-javascript	React (JavaScript)	Vite	Same integration without TypeScript
nextjs	Next.js from v13 (App Router, TypeScript)	Next	Client-only dynamic import (ssr: false)
nextjs-javascript	Next.js Pages Router (JavaScript)	Next	Same SSR gate, Pages Router
vuejs	Vue 2	Vite	Options API, template ref lifecycle
vuejs3	Vue 3	Vite	Composition API, template ref lifecycle
nuxtjs	Nuxt 2	Nuxt	<client-only> wrapper
nuxtjs3	Nuxt 3	Nuxt	Client-only component (.client.vue)
sveltekit	SvelteKit	Vite	ssr: false route + onMount
solidjs-typescript	SolidJS + TypeScript	Vite	onMount / onCleanup lifecycle
angular	Angular	Angular CLI	Standalone component, lifecycle hooks
datafeed-websocket	None (vanilla)	Vite	Focused walkthrough of the datafeed itself

Native (WebView hosts)

The SDK is a browser library, so native apps embed it in a WebView. These load a chart.html configured with isNativeApp: true — the SDK renders the chart canvas only (no JS toolbars) and posts every event to the native bridge, so your app owns the chrome. Native code drives the chart back via window.chart.

Example	Platform	WebView	Bridge global
android	Native Android app (WebView Activity, not Chrome)	WebView	window.Android (@JavascriptInterface)
ios-swift	Native iOS app (WKWebView in UIKit, not Safari)	WKWebView	window.webkit.messageHandlers.ios
react-native	React Native	react-native-webview	window.ReactNativeWebView
flutter	Flutter (Dart)	webview_flutter	window.Flutter (JS channel)

See the Mobile Integration guide for the full event surface.

Why these ship a mock feed. Native WebViews load chart.html from the app bundle/assets, which is a file:// origin. The GoCharting demo WebSocket only accepts localhost origins, so a bundled page cannot use it — the chart would render but sit at "Request timed out". Measured by opening two sockets from the same page, in the real WebView on each platform:

Page origin	Public echo server	wss://gocharting.com/sdk/ws
file:// (iOS WKWebView)	OPEN	ERROR
http://localhost	OPEN	OPEN
http://10.0.2.2 (Android WebView)	OPEN	ERROR

The echo socket connects from every origin, so neither the WebView nor the network is at fault — and note the third row: an http(s) origin is not sufficient, only localhost is accepted. That origin policy is deliberate, so these examples generate their candles in the page instead. The upside is they run offline, in CI, and on a plane.

Using your own feed: replace window.createMockDatafeed() in chart.html with your datafeed. Everything else — isNativeApp, the bridge, window.chart — is unchanged.

Server-rendered

The server just renders the container and passes config into the page; the SDK still runs in the browser.

Example	Stack	Notes
django	Python / Django	Complete runnable project (manage.py runserver)
ruby-on-rails	Ruby / Rails	Controller + view + route to drop into a Rails app

Getting the SDK

The @gocharting/chart-sdk package is not on the public npm registry. Install it with @gocharting/cli, which authenticates against the GoCharting registry and adds the package to the current example. These examples pin the webpack dist-tag.

From an example folder (javascript, react-typescript, …):

npm

npx -p @gocharting/cli gocharting install @gocharting/chart-sdk@webpack --pm npm

pnpm

pnpm --package=@gocharting/cli dlx gocharting install @gocharting/chart-sdk@webpack --pm pnpm

yarn

yarn dlx -p @gocharting/cli gocharting install @gocharting/chart-sdk@webpack --pm yarn

The CLI prompts for two things:

Prompt	Value
Email	Optional — press Enter to skip.
SDK key	demo-550e8400-e29b-41d4-a716-446655440000

Then install the rest of the example's dependencies (npm install / pnpm install / yarn) and run dev.

The same demo key is used again at runtime as the chart's license key in createChart({ licenseKey }). Both are for evaluation — replace them with your own key for production (gocharting.com).

UMD hosts (Django, Rails, native WebViews) have no bundler, so copy index.umd.js and the package's vendor/ directory next to the page. The SDK lazy-loads catalog and icon chunks from ./vendor/; without that folder the chart fails at startup with failed to fetch …/vendor/indicatorCatalog.js.

Quick start

git clone https://github.com/GoChartingOSS/gocharting-sdk-examples.git
cd gocharting-sdk-examples/react-typescript

# install the SDK (pick the command for your package manager)
# email: press Enter to skip | SDK key: demo-550e8400-e29b-41d4-a716-446655440000
npx -p @gocharting/cli gocharting install @gocharting/chart-sdk@webpack --pm npm
# pnpm --package=@gocharting/cli dlx gocharting install @gocharting/chart-sdk@webpack --pm pnpm
# yarn dlx -p @gocharting/cli gocharting install @gocharting/chart-sdk@webpack --pm yarn

npm install
npm run dev

The minimal integration

Every example boils down to this:

import * as GoChartingSDK from "@gocharting/chart-sdk";

const chart = GoChartingSDK.createChart("#chart", {
  symbol: "BYBIT:FUTURE:BTCUSDT",
  interval: "5m",
  datafeed: myDatafeed,        // implements getBars + resolveSymbol
  licenseKey: "YOUR_LICENSE_KEY",
  theme: "dark",
});

// later:
chart.destroy();

The datafeed is the only substantial piece you write. At minimum it implements two methods:

• getBars(symbolInfo, resolution, periodParams) → historical OHLCV bars
• resolveSymbol(symbolName, onResolve, onError) → symbol metadata

Optionally add subscribeTicks / unsubscribeTicks for real-time updates and searchSymbols for the symbol search box. See the shared datafeed reference.

Connecting real data

The web and server-rendered examples all use the same ws-datafeed, which implements the SDK's Datafeed interface (getBars, resolveSymbol, subscribeTicks/unsubscribeTicks, searchSymbols) over the GoCharting demo WebSocket. The datafeed-websocket example is a focused walkthrough of how it maps to the wire protocol. The native examples implement the same interface against generated data, inline in their chart.html.

To use your own data, replace ws-datafeed with a datafeed that talks to your provider — the interface is identical. The demo feed is allowlisted to two symbols (BYBIT:FUTURE:BTCUSDT, BYBIT:FUTURE:ETHUSDT) and rate-limited to ~5 connections per IP.

Verification status

Example	Verified by
javascript, react-javascript, react-typescript, vuejs, vuejs3, solidjs-typescript, datafeed-websocket, nextjs, nextjs-javascript	Playwright (Chromium): live BTCUSDT candles, no /vendor/ fetch errors
angular, nuxtjs, nuxtjs3, sveltekit, django	Playwright: chart canvas + live candles
ruby-on-rails	Files dropped into a real rails new app, served, chart rendered
ios-swift	Built and launched on the iPhone 17 simulator: native UIKit app, native menu bar, mock BTCUSDT candles
android	Built and launched on an emulator (ChartActivity): native menu bar, mock BTCUSDT candles
react-native	Type-checked; Android release APK and iOS release simulator app built and launched; candles rendered; Android native menu bridge exercised
flutter	flutter analyze; Android debug APK and iOS simulator app built and launched; candles rendered; Android native menu bridge exercised

These pages need network. The mock datafeed is fully offline, but the SDK still validates its license over HTTPS, and that call requires a real hostname. Both native examples therefore serve the bundled page from loopback HTTP rather than file://, which leaves location.hostname empty and fails the lease.

All four native examples now include runnable host projects. The Rails example remains an integration snippet and was verified by dropping it into a fresh Rails 8 app.

License

MIT