Crypto TradingView Charting Widget SDK By Bitquery

Bitquery TradingView SDK

Easily integrate a ready-made TradingView widget into your website using a lightweight WebSocket server and a responsive client-side widget. Display live cryptocurrency price charts for all tokens traded across major blockchains, including Solana, Ethereum, Binance Smart Chain (BSC), Arbitrum, Optimism, Tron, and Base.

Features

• Real-time Crypto price up to second-level charts. You can demo it on DexRabbit.
• Out-of-the-box modes: currency, token, pair, plus auto-selection of the top cryptocurrencies when no params are provided.
• Symbol search with pair descriptions formatted as: BASE (Base Name) / QUOTE (Quote Name).
• Ready-to-use widget with theme, TradingView path, and container support.

Requirements

• Bitquery OAuth Token — required. Get it by signing in to the Bitquery GraphQL IDE and creating an OAuth token: Bitquery GraphQL IDE. Without an OAuth token, requests to Bitquery will not work.
• Full TradingView Charting Library (self-hosted) — this package does not include CL files and will not work without them. Obtain access from TradingView and host the library yourself. See: TradingView Charting Library. Then provide the assets path via tradingViewPath (e.g., /static/charting_library/).

Installation

npm i @bitquery/tradingview-sdk

Quick Start

1) Start the WebSocket server

import { BitqueryServer } from '@bitquery/tradingview-sdk/server';

const bitqueryServer = new BitqueryServer({
  port: 8080,
  apiKey: process.env.BITQUERY_OAUTH_TOKEN // or a plain string
});

bitqueryServer.init();

The server proxies requests to Bitquery and streams data to the widget/client.

Note: For Node/SSR always import the server from @bitquery/tradingview-sdk/server. For the browser widget, import from @bitquery/tradingview-sdk/client.

2) Initialize the widget on your page

import { BitqueryWidget } from '@bitquery/tradingview-sdk';

const widget = new BitqueryWidget({
  // See “Data Modes” below
  base: 'bid:solana:So11111111111111111111111111111111111111112',
  quote: 'usd',
  market: 'all',

  container: document.getElementById('chart-container'),
  serverUrl: 'ws://localhost:8080',
  tradingViewPath: '/static/charting_library/',
  theme: 'dark'
});

await widget.init();

Ensure your TradingView Charting Library assets are available at tradingViewPath (e.g., /static/charting_library/).

Data Modes and Parameters

The mode is inferred by determineDataType(base, quote, market):

Data Modes (Parameters Contract)

Currency mode

• base: currencyID (e.g. bid:bitcoin)
• quote: 'usd'
• market: empty string '' (currencies do not have a market)

Token mode

• base: tokenID (e.g. bid:solana:So1111...)
• quote: 'usd'
• market: a network/market selector. For now, 'all'; later this will accept a specific network/market value

Pair mode

• base: tokenID (base token)
• quote: quoteTokenID (quote token)
• market: marketID (DEX pool/market where the pair trades)

No parameters

• If no base/quote/market are passed, the widget automatically selects and shows the top currency for the last 24h

Examples:

1) Top Currency (no params)

const widget = new BitqueryWidget({
  container: el,
  serverUrl: 'ws://localhost:8080',
  bitqueryEndpoint:'https://streaming.bitquery.io/eap';
  tradingViewPath: '/static/charting_library/',
  theme: 'dark'
});
await widget.init(); // SDK auto-selects the top currency

2) Currency

const widget = new BitqueryWidget({
  base: 'bid:bitcoin', // currencyID
  quote: 'usd',
  market: '',
  container: el,
  serverUrl: 'ws://localhost:8080',
  tradingViewPath: '/static/charting_library/'
});
await widget.init();

3) Token

const widget = new BitqueryWidget({
  base: 'bid:tron:TNZtMXZinQLr5MFKCQeWkf7b4gsDDKo63U', // tokenID
  quote: 'usd',
  market: 'all', // network (NetworkBid)
  container: el,
  serverUrl: 'ws://localhost:8080',
  tradingViewPath: '/static/charting_library/'
});
await widget.init();

4) Pair

const widget = new BitqueryWidget({
  base: 'bid:solana:So11111111111111111111111111111111111111112',   // tokenID
  quote: 'bid:solana:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v', // quoteTokenID
  market: 'bid:solana:JUP6LkbZbjS1jKKwapdHNy74zcZ3tLUZoi5QNyVTaV4', // marketID (DEX/pool/market)
  container: el,
  serverUrl: 'ws://localhost:8080',
  tradingViewPath: '/static/charting_library/'
});
await widget.init();

Theme Switching

The widget supports hot theme switching without recreation, preserving the current chart state (symbol, interval, position):

// Switch themes dynamically
widget.setTheme('light'); // Switch to light theme
widget.setTheme('dark');  // Switch back to dark theme

// Theme switching preserves:
// - Current symbol and data
// - Chart position and zoom level  
// - Selected time interval
// - All UI elements and buttons

Widget Options

• container — DOM element to mount the chart.
• serverUrl — your local server URL, e.g., ws://localhost:8080.
• tradingViewPath — Charting Library path (/static/charting_library/).
• theme — 'dark' | 'light'.
• base, quote, market — define the mode (see above).

Methods:

• await widget.init() — initialize the widget.
• widget.setTheme(theme) — hot-switch theme between 'dark' and 'light' without recreating the widget.
• widget.destroy() — cleanly dispose the widget and connections.

TradingView Configuration (widgetOptions)

You can configure the underlying TradingView Charting Library via a flexible widgetOptions object. These options are merged into the final new TradingView.widget({...}) call.

Highlights:

• Deep merge: default options < server widgetOptions < client widgetOptions.
• Objects are deep-merged; arrays fully replace the previous value.
• A debug flag __debug: true logs the final merged options in the browser console.
• If locale is set to anything other than en, the SDK automatically enables the use_localization_file feature. Ensure your Charting Library assets contain localization files at the path you provide in tradingViewPath.

Server-side configuration

Pass widgetOptions to the WebSocket server. These options will be sent to clients and applied to the TradingView widget.

import { BitqueryServer } from '@bitquery/tradingview-sdk/server';

const server = new BitqueryServer({
  port: 8080,
  apiKey: process.env.BITQUERY_OAUTH_TOKEN,
  widgetOptions: {
    locale: 'ru',
    time_scale: { min_bar_spacing: 2 },
    overrides: {
      "paneProperties.background": "#fff1e6"
    },
    studies_overrides: {
      "volume.volume.color.0": "#ef5350",
      "volume.volume.color.1": "#26a69a",
      "volume.volume.transparency": 70
    }
  }
});

server.init();

Client-side overrides

Optionally, pass widgetOptions to the browser widget. Client options override server options.

import { BitqueryWidget } from '@bitquery/tradingview-sdk';

const widget = new BitqueryWidget({
  container: document.getElementById('chart-container'),
  serverUrl: 'ws://localhost:8080',
  tradingViewPath: '/static/charting_library/',
  theme: 'dark',
  widgetOptions: {
    // Any TradingView widget options are allowed here
    locale: 'ru',
    overrides: { "paneProperties.background": "#e8f5ff" },
    time_scale: { min_bar_spacing: 2 },
    studies_overrides: {
      "volume.volume.color.0": "#ef5350",
      "volume.volume.color.1": "#26a69a",
      "volume.volume.transparency": 60
    }
  }
});

await widget.init();

Commonly used keys:

• locale: UI language (requires localization files in your Charting Library assets).
• overrides: style overrides (e.g., paneProperties.background, legend, grid).
• studies_overrides: study colors and transparency (e.g., volume colors).
• time_scale: chart time scale settings (e.g., min_bar_spacing).
• enabled_features / disabled_features: toggle Charting Library features (arrays replace previous values).

Precedence: defaults < server widgetOptions < client widgetOptions.

To verify final options in the browser console, set __debug: true. The client will print: TradingViewWidget: merged widget options → { ... }.

Minimal Server Example

import { BitqueryServer } from '@bitquery/tradingview-sdk';

const server = new BitqueryServer({
  port: 8080,
  apiKey: process.env.BITQUERY_OAUTH_TOKEN
});

server.init();

Run this in a Node.js environment. Client code connects via ws://localhost:8080.

FAQ

• Blank screen? Ensure the Charting Library is served at tradingViewPath and the server is running (no CORS/WebSocket errors).
• Nothing shows without params: in topCurrencies mode the SDK picks the first available top currency; if Bitquery returns an empty list, verify your API key/quotas.

License

MIT