TradingView Charting Library Tutorial

Real-time data is provided via Binance WebSocket streams (wss://stream.binance.com:9443/ws). The implementation uses the following stream patterns:

• <symbol>@kline_<interval>: For native Binance intervals (e.g., 1m, 1h).
• <symbol>@trade: Used to rebuild custom intervals (e.g., 2, 4, 10, 90, 180).
• <symbol>@ticker: For 24-hour quote updates.
• <symbol>@ticker_1h: For rolling 1-hour quote updates.
• <symbol>@depth20@100ms: For Trading Platform DOM depth.

To update your TradingView runtime or sync manually placed packages, use the following commands:

Updating via npm (Recommended)

npm run tv:install:ac -- 31.2.0
npm run tv:install:tp -- 31.2.0

Syncing manually placed packages

If you have manually placed charting_library-master or trading_platform-master in the project root, run:

npm run tv:sync
npm run start

Important: Always perform a hard refresh in your browser after updating packages to ensure old TradingView chunks are not reused.

The /trading route provides an extended experience compared to the standard Advanced Charts route. It includes:

• Broker Integration: Uses BrokerDemo from third_party/tradingview/broker-sample/dist/bundle.js via broker_factory and broker_config.
• Market Depth: Trading Platform DOM via subscribeDepth (falls back to synthetic levels if live Binance depth is unavailable).
• Persistence: A LocalStorage-backed adapter for saving/loading charts, drawings, and templates.
• UI Components: Account manager, watchlist, details, quote data, data window, news, and toolbar controls.

If you prefer to place packages manually instead of using the install scripts, follow these directory structures:

Package Placement

Place the downloaded folders in the project root:

• For Advanced Charts: charting_library-master/charting_library/charting_library.js
• For Trading Platform: trading_platform-master/charting_library/charting_library.js

BrokerDemo Bundle

For Trading Platform broker features, you must manually copy the bundle into: third_party/tradingview/broker-sample/dist/bundle.js

You can find the bundle in the Trading Platform repository at broker-sample/dist/bundle.js.

The project uses npm scripts to fetch and organize TradingView runtime assets into a vendor/tradingview/ directory. This directory is ignored by git.

• Use npm run tv:install:ac to install only Advanced Charts.
• Use npm run tv:install:tp to install both Advanced Charts and Trading Platform.
• Use npm run tv:sync to copy existing local TradingView package folders into the vendor/ directory:
  • charting_library-master/charting_library $\rightarrow$ vendor/tradingview/advanced_charts
  • trading_platform-master/charting_library $\rightarrow$ vendor/tradingview/trading_platform

To run the project from a fresh clone, install the npm dependencies, download the desired TradingView runtime version, and start the development server.

For the full Trading Platform experience (includes Advanced Charts and Trading Platform):

npm install
npm run tv:install:tp -- 31.2.0
npm run start

For the free Advanced Charts experience only:

npm install
npm run tv:install:ac -- 31.2.0
npm run start

Once started, access the routes at:

• http://127.0.0.1:3000 (Advanced Charts)
• http://127.0.0.1:3000/trading (Trading Platform)

If you have GitHub SSH access to TradingView's repositories, you can use the provided install helpers to download and place the packages automatically.

Note: If you omit the version number, the script defaults to downloading the master branch.

• npm run tv:install:ac -- <version>: Installs only the Advanced Charts runtime into vendor/tradingview/advanced_charts.
• npm run tv:install:tp -- <version>: Installs both Advanced Charts and Trading Platform into vendor/tradingview/.

If you are using the Trading Platform, the tv:install:tp script also attempts to install the BrokerDemo bundle. If it cannot find it locally, it falls back to fetching it from the Trading Platform repository.

npm run tv:install:ac -- 31.2.0
npm run tv:install:tp -- 31.2.0

The project resolves the active theme using the following priority:

1. URL Parameter: If the URL contains ?theme=dark or ?theme=light, that value is used.
2. Browser Preference: If no URL parameter is present, it falls back to the user's system preference via prefers-color-scheme.
3. Default: Defaults to light if no preference is detected.

You can import the resolved theme constant to check the current state.

To boot the Trading Platform, use createTradingPlatformOptions to configure the widget and pass it to the widget constructor.

Key configuration areas include:

• widgetbar: Controls visibility of details, watchlist, datawindow, and news.
• watchlist_settings: Configures default_symbols and readonly status.
• save_load_adapter: An object implementing the save/load interface (e.g., LocalStorageSaveLoadAdapter).
• context_menu: Custom menu logic.
• broker_factory & broker_config: Broker integration via widgetOptions.

const wdg = new createWidget(
	createTradingPlatformOptions({
		widgetbar: {
			details: true,
			watchlist: true,
			},
		save_load_adapter: new LocalStorageSaveLoadAdapter(),
		...brokerOptions.widgetOptions,
	})
);

Use installThemeToolbar(widget) to add a complete toolbar to your TradingView widget. This includes a theme toggle (switching between light and dark modes) and a documentation shortcut button. The installation is asynchronous and waits for the widget header to be ready via widget.headerReady().

import { installThemeToolbar } from './toolbar.js';

// Assuming 'widget' is your initialized TradingView Charting Library widget instance
installThemeToolbar(widget);

Use installDocumentationToolbar(widget) if you want to add only a small documentation shortcut button to the widget toolbar without the theme toggle. This also waits for widget.headerReady() before rendering.

import { installDocumentationToolbar } from './toolbar.js';

installDocumentationToolbar(widget);

The development server can be started using Node.js. By default, it runs on 127.0.0.1:3000. You can optionally specify a custom port and host via command-line arguments.

Usage: node server.mjs [port] [host]

# Run on default port 3000 and host 127.0.0.1
node server.mjs

# Run on custom port 8080 and host 0.0.0.0
node server.mjs 8080 0.0.0.0