TradeX Chart

https://tradex-app.github.io/TradeX-chart/
Admin
TradeX Chart is a highly customizable lightweight financial charting library built in plain...
Tokens:217,323
Snippets:2,088
Trust Score:9.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install TradeX Chart

Source: https://tradex-app.github.io/TradeX-chart/guides/framework-integration/angular-integration

Install the TradeX Chart library using npm or yarn.

```bash
npm install tradex-chart
# or
yarn add tradex-chart
```

--------------------------------

### Changelog Entry Example

Source: https://tradex-app.github.io/TradeX-chart/guides/development/contributing-code

An example of how to format an entry in the CHANGELOG.md file, detailing additions, fixes, and changes.

```markdown
## [Unreleased]

### Added
- VWAP indicator with customizable period

### Fixed
- Memory leak in canvas rendering

### Changed
- Improved performance of SMA calculation
```

--------------------------------

### Initialize TradeX-chart with Static Data

Source: https://tradex-app.github.io/TradeX-chart/examples/01_static_chart

This snippet shows the basic setup for initializing the TradeX-chart component and starting it with a configuration object that includes price history. Ensure the `tradex-chart` library is imported and the chart element is appended to the DOM.

```javascript
import "./styles.css";
/* eslint-disable no-undef, no-unused-vars */
import * as TX from "tradex-chart";
import config from "./config";
const chart = document.createElement("tradex-chart");
const app = document.getElementById("app");
app.appendChild(chart);
chart.start(config);
window.chart = chart;
```

--------------------------------

### Install ESLint for Linting

Source: https://tradex-app.github.io/TradeX-chart/guides/development/local-setup

Install ESLint as a development dependency and initialize its configuration for code linting.

```bash
npm install --save-dev eslint
npx eslint --init
```

--------------------------------

### Create and Start DataSource

Source: https://tradex-app.github.io/TradeX-chart/reference/datasource

Demonstrates creating a DataSource instance with configuration and starting the ticker history. Requires external functions for data fetching and stream management.

```javascript
import DataSource from './dataSource.js';

// Create a data source
const config = {
  symbol: 'BTC/USDT',
  timeFrameInit: 3600000, // 1 hour
  source: {
    name: 'binance',
    rangeLimitPast: async (event, symbol, tf, timestamp) => {
      // Fetch historical data
      return await fetchHistoricalData(symbol, tf, timestamp);
    }
  }
};

const dataSource = DataSource.create(config, chartState);

// Start real-time data
dataSource.startTickerHistory({
  symbol: 'BTC/USDT',
  tf: 3600000,
  rangeLimitPast: fetchHistoricalData,
  start: startTickerStream,
  stop: stopTickerStream
});
```

--------------------------------

### Documentation Directory Structure

Source: https://tradex-app.github.io/TradeX-chart/guides/contributing

Understand the standard directory structure for documentation, including guides, reference, examples, and API documentation.

```bash
docs/
├── guides/          # User guides and tutorials
├── reference/       # API reference and technical docs
├── examples/        # Code examples
└── api/            # Auto-generated API docs
```

--------------------------------

### Start Development Server

Source: https://tradex-app.github.io/TradeX-chart/guides/development/local-setup

Start the Vite development server to run the project locally. The server will be available at http://localhost:5173.

```bash
npm run dev
```

--------------------------------

### Install and Configure TALib

Source: https://tradex-app.github.io/TradeX-chart/guides/faq

Install the talib-web package via npm and import it to configure TALib for use with indicators in TradeX Chart.

```bash
npm install talib-web
```

```javascript
import * as talib from 'talib-web'

const config = {
  talib: talib
}
```

--------------------------------

### Install TradeX Chart with npm

Source: https://tradex-app.github.io/TradeX-chart/reference/01_getting_started

Use npm to install the TradeX Chart library. Add it to your project dependencies.

```bash
npm install tradex-chart --save
```

--------------------------------

### Quick Start with jsDelivr

Source: https://tradex-app.github.io/TradeX-chart/guides/deployment/cdn-deployment

Embed TradeX Chart in an HTML page using jsDelivr for quick setup and testing.

```html
<!DOCTYPE html>
<html>
<head>
  <title>TradeX Chart</title>
</head>
<body>
  <tradex-chart id="myChart"></tradex-chart>

  <!-- Load from jsDelivr -->
  <script src="https://cdn.jsdelivr.net/npm/tradex-chart/dist/tradex-chart.umd.min.js"></script>
  
  <script>
    const chart = document.getElementById('myChart')
    
    chart.start({
      title: 'BTC/USDT',
      state: {
        ohlcv: [] // Your data
      }
    })
  </script>
</body>
</html>
```

--------------------------------

### Multi-Symbol Dashboard Setup

Source: https://tradex-app.github.io/TradeX-chart/examples/multi-chart-sync

Create a dashboard with multiple tradex-chart elements, each displaying a different cryptocurrency symbol. This example uses CSS Grid for layout and initializes each chart with its respective symbol and an empty state for OHLCV data.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    .chart-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      height: 100vh;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="chart-grid">
    <tradex-chart id="btc-chart"></tradex-chart>
    <tradex-chart id="eth-chart"></tradex-chart>
    <tradex-chart id="bnb-chart"></tradex-chart>
    <tradex-chart id="sol-chart"></tradex-chart>
  </div>

  <script>
    const symbols = ['BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT']
    const sync = new ChartSynchronizer()

    symbols.forEach((symbol, index) => {
      const chart = document.getElementById(`${symbol.toLowerCase().slice(0, 3)}-chart`)
      
      chart.start({
        title: symbol,
        state: {
          ohlcv: [] // Load data for each symbol
        }
      })

      sync.addChart(chart)
    })
  </script>
</body>
</html>
```

--------------------------------

### Example Documentation Frontmatter

Source: https://tradex-app.github.io/TradeX-chart/guides/contributing

Example of documentation frontmatter including title and description, followed by Markdown content and a JavaScript code snippet.

```markdown
---
title: Adding Indicators
description: Learn how to add technical indicators to your chart
---

# Adding Indicators

Technical indicators help analyze price movements.

## Basic Usage

```javascript
// Add an indicator
chart.addIndicator('RSI', { period: 14 })
```

## Available Indicators
  * **RSI** - Relative Strength Index
  * **MACD** - Moving Average Convergence Divergence
  * **EMA** - Exponential Moving Average


See Indicators Reference for the complete list.
```

--------------------------------

### Initialize and Start TradeX-chart

Source: https://tradex-app.github.io/TradeX-chart/examples/02_live_history_chart

This snippet initializes the TradeX-chart component, starts its data streaming capabilities, and then fetches historical data. Ensure the chart element is appended to the DOM and the configuration is correctly set up before calling start().

```javascript
import "./styles.css";
/* eslint-disable no-undef, no-unused-vars */
import * as TX from "tradex-chart";
import config from "./config";
import { kLine_huobi } from "./huobi";
const chart = document.createElement("tradex-chart");
const app = document.getElementById("app");
const symbol = "btcusdt";
const timeframe = "1min";
const history = 200;
app.appendChild(chart);
chart.start(config);
chart.stream.start();
kLine_huobi(symbol, timeframe, history, chart);
window.chart = chart;
```

--------------------------------

### start(cfg)

Source: https://tradex-app.github.io/TradeX-chart/api/core

Initializes the chart after the target element has been validated as a mount point. Accepts a configuration object.

```APIDOC
## start(cfg)

### Description
Target element has been validated as a mount point, let’s start building.

### Parameters
#### Path Parameters
- **cfg** (Object) - chart configuration
```

--------------------------------

### Start TradeX Chart with Configuration

Source: https://tradex-app.github.io/TradeX-chart/reference/01_getting_started

Initialize the TradeX Chart with a configuration object after it has been mounted to the DOM.

```javascript
chart.start(config)
```

--------------------------------

### Chart Initialization and Stream Start

Source: https://tradex-app.github.io/TradeX-chart/reference/streaming_price_data

Initialize the chart with a configuration that includes stream definitions and then start the chart's streaming capabilities.

```APIDOC
## Chart Initialization and Stream Start

### Description
Initializes the chart with a given configuration, which must include a stream definition. After successful initialization, the chart's streaming functionality is started.

### Method
```javascript
chart.start(config)
chart.stream.start()
```

### Parameters
#### `chart.start(config)`
- **config** (object) - Required - The configuration object for the chart, including stream definitions.

#### `chart.stream.start()`
This method does not take any parameters.

### Request Example
```javascript
const config = {
  // ... other chart configurations
  stream: {
    // stream specific options
  }
};

chart.start(config);
chart.stream.start();
```

### Response
- **Success**: The chart is initialized and the stream is ready to receive data.
- **Error**: If the config or stream definition is invalid, the stream will not initialize.
```

--------------------------------

### Initialize and Start Dialogue - JavaScript

Source: https://tradex-app.github.io/TradeX-chart/reference/widgets

Instantiate a Dialogue widget with configuration options and then start it. Configuration includes drag bar, close icon, title, content, position, and styles.

```javascript
const config = {dragBar, closeIcon, title, content, position, styles}
const dialogue = chart.WidgetsG.insert("Dialogue", config)
      dialogue.start()
```

--------------------------------

### Install talib-web for Technical Indicators

Source: https://tradex-app.github.io/TradeX-chart/guides/faq

Install the talib-web package if you plan to use technical indicators. This is an optional dependency.

```bash
npm install talib-web
```

--------------------------------

### Install Project Dependencies

Source: https://tradex-app.github.io/TradeX-chart/guides/development/local-setup

Install all necessary project dependencies using npm. This includes Vite, Vitest, Canvas, TALib-web, and Rollup plugins.

```bash
# Install all dependencies
npm install
```

--------------------------------

### Install Rollup Plugin Visualizer

Source: https://tradex-app.github.io/TradeX-chart/guides/development/build-process

Install the plugin to analyze bundle sizes. This is useful for identifying large dependencies.

```bash
npm install --save-dev rollup-plugin-visualizer
```

--------------------------------

### Initialize Chart with Data

Source: https://tradex-app.github.io/TradeX-chart/guides/data-management

Demonstrates how to create a TradeX Chart instance and load initial OHLCV data during chart setup.

```javascript
const chart = document.createElement('tradex-chart')

chart.start({
  title: 'BTC/USDT',
  state: {
    ohlcv: ohlcvData
  }
})
```

--------------------------------

### WebSocket Connection Example

Source: https://tradex-app.github.io/TradeX-chart/api/real-time-websocket

Demonstrates how to establish a WebSocket connection, send subscription messages, and handle incoming messages and events.

```APIDOC
## WebSocket Connection Example

### WebSocket States
```typescript
enum WebSocketState {
  CONNECTING = 0,
  OPEN = 1,
  CLOSING = 2,
  CLOSED = 3
}
```

### WebSocket Events
```typescript
interface WebSocketEvents {
  onopen: (event: Event) => void
  onmessage: (event: MessageEvent) => void
  onerror: (event: Event) => void
  onclose: (event: CloseEvent) => void
}
```

### Connection and Message Handling
```javascript
const ws = new WebSocket('wss://api.example.com/ws')

ws.onopen = () => {
  console.log('WebSocket connected')
  ws.send(JSON.stringify({ type: 'subscribe', symbol: 'BTCUSDT' }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  handleMessage(data)
}

ws.onerror = (error) => {
  console.error('WebSocket error:', error)
}

ws.onclose = () => {
  console.log('WebSocket closed')
  reconnect()
}

function handleMessage(data) {
  // Process incoming message data
  console.log('Received message:', data)
}

function reconnect() {
  // Implement reconnection logic here
  console.log('Attempting to reconnect...')
}
```
```

--------------------------------

### Basic DataSource Setup

Source: https://tradex-app.github.io/TradeX-chart/reference/datasource

Initializes the TradeXChart and creates a DataSource instance with basic configuration for a specific symbol and data source.

```javascript
import DataSource from './dataSource.js';
import TradeXChart from './core.js';

const chart = new TradeXChart(container, config);
const state = chart.state;

const dataSource = DataSource.create({
  symbol: 'BTC/USDT',
  timeFrameInit: '1h',
  source: {
    name: 'myExchange'
  }
}, state);
```

--------------------------------

### Quick Start with unpkg

Source: https://tradex-app.github.io/TradeX-chart/guides/deployment/cdn-deployment

Integrate TradeX Chart using unpkg, with options for loading the latest or a specific version.

```html
<!-- Latest version -->
<script src="https://unpkg.com/tradex-chart"></script>

<!-- Specific version -->
<script src="https://unpkg.com/tradex-chart@1.0.0/dist/tradex-chart.umd.min.js"></script>
```

--------------------------------

### Install TradeX Chart via npm or yarn

Source: https://tradex-app.github.io/TradeX-chart/guides/faq

Use npm or yarn to add the TradeX Chart library to your project. Ensure you have Node.js and npm/yarn installed.

```bash
# Via npm
npm install tradex-chart

# Via yarn
yarn add tradex-chart
```

--------------------------------

### Check Git Version

Source: https://tradex-app.github.io/TradeX-chart/guides/development/local-setup

Verify that Git is installed on your system.

```bash
git --version
```

--------------------------------

### Start Vite Development Server

Source: https://tradex-app.github.io/TradeX-chart/guides/development/build-process

Starts the Vite development server with Hot Module Replacement (HMR) and source maps for debugging. It runs on http://localhost:5173.

```bash
vite
```

--------------------------------

### Install TradeX Chart with yarn

Source: https://tradex-app.github.io/TradeX-chart/reference/01_getting_started

Use yarn to add the TradeX Chart library to your project. This is an alternative to npm.

```bash
yarn add tradex-chart
```

--------------------------------

### Start Chart Stream

Source: https://tradex-app.github.io/TradeX-chart/reference/streaming_price_data

After creating the chart element and passing the config, call `chart.stream.start()` to initialize the stream if the config is valid.

```javascript
chart.stream.start()
```

--------------------------------

### Check npm Version

Source: https://tradex-app.github.io/TradeX-chart/guides/development/local-setup

Verify that npm version 9.x or higher is installed. npm comes bundled with Node.js.

```bash
npm --version
```

--------------------------------

### Define a Light Theme Preset

Source: https://tradex-app.github.io/TradeX-chart/api/custom-theme-builder

An example of a predefined light theme configuration that can be applied to the chart.

```typescript
const lightTheme: Theme = {
  candle: {
    upBodyColor: '#4caf50',
    upWickColor: '#4caf50',
    downBodyColor: '#f44336',
    downWickColor: '#f44336'
  },
  background: '#ffffff',
  grid: {
    color: '#e0e0e0',
    style: 'solid'
  },
  xAxis: {
    color: '#333',
    fontSize: 12
  },
  yAxis: {
    color: '#333',
    fontSize: 12
  },
  crosshair: {
    color: '#999',
    style: 'dashed'
  }
}
```

--------------------------------

### Basic Vite Configuration

Source: https://tradex-app.github.io/TradeX-chart/guides/deployment/vite-config

Sets up the root directory, build output, and development server port.

```javascript
import { defineConfig } from 'vite'

export default defineConfig({
  root: './src',
  build: {
    outDir: '../dist',
    emptyOutDir: true
  },
  server: {
    port: 3000,
    open: true
  }
})
```

--------------------------------

### Install Canvas Dependencies

Source: https://tradex-app.github.io/TradeX-chart/guides/development/local-setup

If the canvas module fails to install, ensure you have the necessary build and graphics libraries installed for your operating system before reinstalling.

```bash
# On Ubuntu/Debian
sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev

# On macOS
brew install pkg-config cairo pango libpng jpeg giflib librsvg

# Then reinstall
npm install canvas
```

--------------------------------

### Run Tests and Development Server

Source: https://tradex-app.github.io/TradeX-chart/guides/contributing

Commands to execute the test suite, start the development server for testing in the browser, and build the project to verify changes.

```bash
# Run tests
npm test

# Test in browser
npm run dev

# Build to verify
npm run build
```

--------------------------------

### exports.start(cfg)

Source: https://tradex-app.github.io/TradeX-chart/api/core2

Initiates the chart building process after validating the target element as a mount point.

```APIDOC
## exports.start(cfg)

### Description
Target element has been validated as a mount point, let’s start building.

### Parameters
- **cfg** (Object) - Chart configuration object.
```

--------------------------------

### exports.setRange(start, end)

Source: https://tradex-app.github.io/TradeX-chart/api/core2

Sets the start and end indices for the visible range of the chart data.

```APIDOC
## exports.setRange(start, end)

### Description
Set start and end of range.

### Parameters
- **start** (number) - The starting index of the range.
- **end** (number) - The ending index of the range.
```

--------------------------------

### Module Resolution Example

Source: https://tradex-app.github.io/TradeX-chart/guides/development/build-process

Illustrates correct and incorrect ways to import modules. Using relative paths is recommended for local modules, while absolute paths can lead to resolution errors.

```javascript
// Use relative paths
import { Chart } from './components/chart.js'

// Not absolute
import { Chart } from 'components/chart.js'
```

--------------------------------

### Example OHLCV Data

Source: https://tradex-app.github.io/TradeX-chart/guides/data-management

Provides an example array of OHLCV data points for chart initialization.

```javascript
const ohlcvData = [
  [1609459200000, 29000, 29500, 28800, 29200, 1234.56],
  [1609462800000, 29200, 29800, 29100, 29600, 2345.67],
  [1609466400000, 29600, 30000, 29400, 29800, 3456.78]
]
```

--------------------------------

### Initialize Real-time Chart with WebSocket

Source: https://tradex-app.github.io/TradeX-chart/guides/backend/websocket-integration

This example demonstrates initializing a Tradex chart and connecting to a WebSocket for live data. It fetches historical data first, then establishes a WebSocket connection for real-time updates. Ensure you have a RobustWebSocket implementation available.

```javascript
import { Chart } from 'tradex-chart'

class RealtimeChartApp {
  constructor(containerId) {
    this.container = document.getElementById(containerId)
    this.chart = null
    this.ws = null
  }
  
  async initialize(symbol, timeframe) {
    // Create chart
    this.chart = document.createElement('tradex-chart')
    this.container.appendChild(this.chart)
    
    // Load initial historical data
    const historicalData = await this.fetchHistoricalData(symbol, timeframe)
    
    this.chart.start({
      title: symbol,
      state: { ohlcv: historicalData }
    })
    
    // Connect WebSocket for real-time updates
    this.connectWebSocket(symbol, timeframe)
  }
  
  async fetchHistoricalData(symbol, timeframe) {
    const response = await fetch(
      `https://api.example.com/ohlcv?symbol=${symbol}&timeframe=${timeframe}&limit=500`
    )
    return response.json()
  }
  
  connectWebSocket(symbol, timeframe) {
    this.ws = new RobustWebSocket('wss://api.example.com/ws', {
      onopen: () => {
        console.log('WebSocket connected')
        this.ws.send(JSON.stringify({
          type: 'subscribe',
          symbol: symbol,
          timeframe: timeframe
        }))
      },
      onmessage: (event) => {
        const data = JSON.parse(event.data)
        this.handleUpdate(data)
      },
      onerror: (error) => {
        console.error('WebSocket error:', error)
        this.showError('Connection error')
      }
    })
    
    this.ws.connect()
  }
  
  handleUpdate(data) {
    const candle = [
      data.timestamp,
      data.open,
      data.high,
      data.low,
      data.close,
      data.volume
    ]
    
    if (data.isClosed) {
      this.chart.addCandle(candle)
    } else {
      this.chart.updateStreamingCandle(candle)
    }
  }
  
  showError(message) {
    console.error(message)
    // Display error to user
  }
  
  destroy() {
    if (this.ws) {
      this.ws.close()
    }
  }
}

// Usage
const app = new RealtimeChartApp('chart-container')
await app.initialize('BTCUSDT', '1m')

```

--------------------------------

### exports.getRange(start, end)

Source: https://tradex-app.github.io/TradeX-chart/api/core2

Initializes or retrieves the current range of the chart data based on start and end indices.

```APIDOC
## exports.getRange(start, end)

### Description
Initialize range.

### Parameters
- **start** (number) - The starting index of the range.
- **end** (number) - The ending index of the range.
```

--------------------------------

### Update DataSource Creation for Migration

Source: https://tradex-app.github.io/TradeX-chart/reference/datasource

Example demonstrating the updated DataSource creation process for version 2.x, including symbol, timeframe, and source configuration.

```javascript
// Before
const dataSource = new DataSource('BTC/USDT', '1h', {
  fetchHistory: fetchFunction
});

// After
const dataSource = DataSource.create({
  symbol: 'BTC/USDT',
  timeFrameInit: '1h',
  source: {
    name: 'myExchange',
    rangeLimitPast: fetchFunction
  }
}, chartState);
```

--------------------------------

### WebSocket Connection Example

Source: https://tradex-app.github.io/TradeX-chart/api/real-time-websocket

Establishes a WebSocket connection, handles connection events (open, message, error, close), and sends a subscription message. Includes basic reconnection logic.

```javascript
const ws = new WebSocket('wss://api.example.com/ws')

ws.onopen = () => {
  console.log('WebSocket connected')
  ws.send(JSON.stringify({ type: 'subscribe', symbol: 'BTCUSDT' }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  handleMessage(data)
}

ws.onerror = (error) => {
  console.error('WebSocket error:', error)
}

ws.onclose = () => {
  console.log('WebSocket closed')
  reconnect()
}
```

--------------------------------

### Example Conventional Commit Messages

Source: https://tradex-app.github.io/TradeX-chart/guides/contributing

Illustrative examples of commit messages following the Conventional Commits specification for different types of changes.

```git
feat(indicators): add Bollinger Bands indicator
fix(chart): resolve canvas memory leak
docs(api): update Chart class documentation
test(overlays): add unit tests for overlay rendering
```

--------------------------------

### Jump to Start

Source: https://tradex-app.github.io/TradeX-chart/reference/range

Positions the chart's display range to the earliest data history value. Optionally centers the display on this start value.

```APIDOC
## Jump to Start

Position the chart display range on the earliest (first) data history value.
`center` will center the display range on the start value.

```javascript
chart.jumpToStart(center=false)
```
```

--------------------------------

### Build Project for Production

Source: https://tradex-app.github.io/TradeX-chart/guides/development/local-setup

Generate a comprehensive production build, including minified versions, source maps, type definitions, and documentation.

```bash
npm run buildall
```

--------------------------------

### jumpToIndex(start, nearest, centre)

Source: https://tradex-app.github.io/TradeX-chart/api/core

Sets the range start index for the chart data. Allows specifying whether to limit the range and center it.

```APIDOC
## jumpToIndex(start, nearest, centre)

### Description
Set Range start index.

### Parameters
#### Path Parameters
- **start** (number) - starting index of state data
- **nearest** (boolean) - Optional, defaults to `true`. Limit range start - no out of range values.
- **centre** (boolean) - Optional, defaults to `true`. Center the range on the start value.
```

--------------------------------

### Build Production Artifacts

Source: https://tradex-app.github.io/TradeX-chart/guides/deployment/production-checklist

Run the build script to minify and bundle your code for production. Verify the output in the dist/ folder.

```bash
npm run build
# Verify output in dist/ folder
```

--------------------------------

### Initialize Tradex Chart with GraphQL Data

Source: https://tradex-app.github.io/TradeX-chart/guides/backend/graphql-integration

This example demonstrates initializing the Tradex Chart with historical data fetched via GraphQL and setting up a subscription for real-time updates. Ensure your GraphQL endpoint and schema support the required queries and subscriptions.

```javascript
import { ApolloClient, InMemoryCache, gql } from '@apollo/client'
import { Chart } from 'tradex-chart'

class GraphQLChartApp {
  constructor(endpoint) {
    this.client = new ApolloClient({
      uri: endpoint,
      cache: new InMemoryCache()
    })
    
    this.chart = null
    this.subscription = null
  }
  
  async initialize(symbol, timeframe) {
    // Load initial data
    const ohlcv = await this.fetchInitialData(symbol, timeframe)
    
    // Create chart
    this.chart = document.createElement('tradex-chart')
    document.getElementById('chart').appendChild(this.chart)
    
    this.chart.start({
      title: symbol,
      state: { ohlcv }
    })
    
    // Subscribe to real-time updates
    this.subscribeToUpdates(symbol, timeframe)
  }
  
  async fetchInitialData(symbol, timeframe) {
    const query = gql`
      query GetOHLCV($symbol: String!, $timeframe: String!, $limit: Int!) {
        ohlcv(symbol: $symbol, timeframe: $timeframe, limit: $limit) {
          timestamp open high low close volume
        }
      }
    `
    
    const { data } = await this.client.query({
      query,
      variables: { symbol, timeframe, limit: 500 }
    })
    
    return data.ohlcv.map(c => [
      c.timestamp, c.open, c.high, c.low, c.close, c.volume
    ])
  }
  
  subscribeToUpdates(symbol, timeframe) {
    const subscription = gql`
      subscription OnCandleUpdate($symbol: String!, $timeframe: String!) {
        candleUpdated(symbol: $symbol, timeframe: $timeframe) {
          timestamp open high low close volume isClosed
        }
      }
    `
    
    this.subscription = this.client
      .subscribe({
        query: subscription,
        variables: { symbol, timeframe }
      })
      .subscribe({
        next: ({ data }) => {
          const candle = data.candleUpdated
          const formatted = [
            candle.timestamp,
            candle.open,
            candle.high,
            candle.low,
            candle.close,
            candle.volume
          ]
          
          if (candle.isClosed) {
            this.chart.addCandle(formatted)
          } else {
            this.chart.updateStreamingCandle(formatted)
          }
        },
        error: (error) => console.error('Subscription error:', error)
      })
  }
  
  destroy() {
    if (this.subscription) {
      this.subscription.unsubscribe()
    }
  }
}

// Usage
const app = new GraphQLChartApp('https://api.example.com/graphql')
await app.initialize('BTCUSDT', '1h')

```

--------------------------------

### exports.jumpToIndex(start, nearest, centre)

Source: https://tradex-app.github.io/TradeX-chart/api/core2

Adjusts the chart's visible range to start at a specific index, with options to snap to the nearest valid index and center the view.

```APIDOC
## exports.jumpToIndex(start, nearest, centre)

### Description
Set Range start index.

### Parameters
- **start** (number) - The starting index of the state data.
- **nearest** (boolean) - Limit range start - no out of range values.
- **centre** (boolean) - Center the range on the start value.
```

--------------------------------

### Dialogue Styling Example - JavaScript

Source: https://tradex-app.github.io/TradeX-chart/reference/widgets

Configure the appearance of a dialogue widget by providing style objects for its various elements. This example shows styling for the drag bar and title.

```javascript
const config = {
  dragBar: true,
  dimensions: {w: 199, y: 100}
  position: {x: 100, y: 100},
  styles: {
    dragBar: { background: "#888" }
    title: { color: "#ccc" }
  }
}
```

--------------------------------

### Clone Repository and Set Up Remotes

Source: https://tradex-app.github.io/TradeX-chart/guides/development/contributing-code

Clone your forked repository and add the upstream remote to fetch changes from the main project.

```bash
git clone https://github.com/YOUR_USERNAME/TradeX-chart.git
cd TradeX-chart

# Add upstream remote
git remote add upstream https://github.com/tradex-app/TradeX-chart.git
```

--------------------------------

### Jump to Specific Timestamp

Source: https://tradex-app.github.io/TradeX-chart/reference/range

Position the chart display range on a specified timestamp. 'limited' restricts the start index to in-bounds values, and 'center' centers the display on the start value.

```javascript
chart.jumpToTS(ts, limited=true, center=true)
```

--------------------------------

### Preset Themes

Source: https://tradex-app.github.io/TradeX-chart/api/custom-theme-builder

Provides example configurations for common themes like 'Dark Theme' and 'Light Theme' that can be used directly or as a basis for custom themes.

```APIDOC
## Preset Themes

### Dark Theme
```javascript
const darkTheme: Theme = {
  candle: {
    upBodyColor: '#26a69a',
    upWickColor: '#26a69a',
    downBodyColor: '#ef5350',
    downWickColor: '#ef5350'
  },
  background: '#1e1e1e',
  grid: {
    color: '#2a2a2a',
    style: 'solid'
  },
  xAxis: {
    color: '#888',
    fontSize: 12
  },
  yAxis: {
    color: '#888',
    fontSize: 12
  },
  crosshair: {
    color: '#666',
    style: 'dashed'
  }
}
```

### Light Theme
```javascript
const lightTheme: Theme = {
  candle: {
    upBodyColor: '#4caf50',
    upWickColor: '#4caf50',
    downBodyColor: '#f44336',
    downWickColor: '#f44336'
  },
  background: '#ffffff',
  grid: {
    color: '#e0e0e0',
    style: 'solid'
  },
  xAxis: {
    color: '#333',
    fontSize: 12
  },
  yAxis: {
    color: '#333',
    fontSize: 12
  },
  crosshair: {
    color: '#999',
    style: 'dashed'
  }
}
```
```

--------------------------------

### Complete Cached Chart Application Example

Source: https://tradex-app.github.io/TradeX-chart/guides/backend/data-caching-strategies

A full example demonstrating the integration of caching and cache invalidation within a chart application, including initialization, loading, and refreshing chart data.

```javascript
import { Chart } from 'tradex-chart'

class CachedChartApp {
  constructor() {
    this.cache = new MultiTierCache()
    this.fetcher = new CachedDataFetcher(this.cache, apiClient)
    this.invalidator = new CacheInvalidator(this.cache)
  }
  
  async init() {
    await this.cache.init()
    this.invalidator.startPeriodicCleanup()
  }
  
  async loadChart(symbol, timeframe) {
    // Try to get cached data
    const data = await this.fetcher.getData(symbol, timeframe)
    
    // Initialize chart
    const chart = document.createElement('tradex-chart')
    document.getElementById('chart').appendChild(chart)
    
    chart.start({
      title: symbol,
      state: { ohlcv: data }
    })
    
    return chart
  }
  
  async refreshChart(symbol, timeframe) {
    // Force refresh from API
    const data = await this.fetcher.getData(symbol, timeframe, {
      forceRefresh: true
    })
    
    chart.mergeData(data)
  }
}

// Usage
const app = new CachedChartApp()
await app.init()
await app.loadChart('BTCUSDT', '1h')
```

--------------------------------

### Build All Script

Source: https://tradex-app.github.io/TradeX-chart/guides/development/build-process

A comprehensive bash script that executes the standard build, builds a minified production version, generates documentation, and runs tests.

```bash
#!/bin/bash

# Run standard build
./bin/build.sh

# Build minified version
vite build --mode production

# Generate documentation
npm run docs:build

# Run tests
npm test

echo "Full build complete!"
```

--------------------------------

### Get and Set Indicator Visibility

Source: https://tradex-app.github.io/TradeX-chart/reference/api-examples

Control the visibility of an indicator. The `visible()` method can be used to get the current state or set a new visibility state (true for visible, false for not visible).

```javascript
const visible = chart1.ChartPanes.get("TradeX_test-RSI__20_3").indicators["TradeX_test-RSI__20_3-RSI_5"].instance.visible()

// set indicator visibility to not visible (false)
chart1.ChartPanes.get("TradeX_test-RSI__20_3").indicators["TradeX_test-RSI__20_3-RSI_5"].instance.visible(false)
```

--------------------------------

### Jump to Specific Data Index

Source: https://tradex-app.github.io/TradeX-chart/reference/range

Position the chart display range on a specified data history index. 'limited' restricts the start index to in-bounds values, and 'center' centers the display on the start value.

```javascript
chart.jumpToIndex(start, limited=true, center=true)
```

--------------------------------

### Complete Tradex Chart Application Example

Source: https://tradex-app.github.io/TradeX-chart/guides/backend/rest-api-integration

Demonstrates a full integration of the Tradex Chart with a REST API, including data fetching, chart initialization, and error handling. Shows how to set up API configuration and usage.

```javascript
import { Chart } from 'tradex-chart'

class TradingChartApp {
  constructor(containerId, apiConfig) {
    this.container = document.getElementById(containerId)
    this.apiConfig = apiConfig
    this.chart = null
    this.dataManager = null
  }
  
  async initialize(symbol, timeframe) {
    try {
      // Fetch initial data
      const data = await this.fetchData(symbol, timeframe, 500)
      
      // Create chart
      this.chart = document.createElement('tradex-chart')
      this.container.appendChild(this.chart)
      
      this.chart.start({
        title: symbol,
        symbol: symbol,
        state: {
          ohlcv: data
        }
      })
      
      // Setup data manager for infinite scroll
      this.dataManager = new ChartDataManager(
        this.chart,
        symbol,
        timeframe
      )
      
    } catch (error) {
      console.error('Failed to initialize chart:', error)
      this.showError(error.message)
    }
  }
  
  async fetchData(symbol, timeframe, limit) {
    const response = await fetch(
      `${this.apiConfig.baseURL}/ohlcv?` +
      `symbol=${symbol}&timeframe=${timeframe}&limit=${limit}`,
      {
        headers: {
          'Authorization': `Bearer ${this.apiConfig.apiKey}`
        }
      }
    )
    
    if (!response.ok) {
      throw new Error(`API error: ${response.status}`)
    }
    
    const data = await response.json()
    return this.formatData(data)
  }
  
  formatData(data) {
    return data.map(candle => [
      candle.timestamp,
      candle.open,
      candle.high,
      candle.low,
      candle.close,
      candle.volume
    ])
  }
  
  showError(message) {
    const errorDiv = document.createElement('div')
    errorDiv.className = 'error-message'
    errorDiv.textContent = message
    this.container.appendChild(errorDiv)
  }
}

// Usage
const app = new TradingChartApp('chart-container', {
  baseURL: 'https://api.example.com/v1',
  apiKey: 'your-api-key'
})

app.initialize('BTCUSDT', '1h')

```

--------------------------------

### Run Tests and Development Server

Source: https://tradex-app.github.io/TradeX-chart/guides/development/contributing-code

Execute tests using npm test and start the development server with npm run dev to check changes in the browser.

```bash
# Run tests
npm test

# Run specific test
npm test -- tests/your-test.test.js

# Check in browser
npm run dev
```

--------------------------------

### name

Source: https://tradex-app.github.io/TradeX-chart/api/core

Gets the user-defined name of the chart.

```APIDOC
## name

### Description
User defined chart name.

### Returns
`string` - user defined chart name
```

--------------------------------

### Enable Asset Compression

Source: https://tradex-app.github.io/TradeX-chart/guides/deployment/production-checklist

Configure your server to use compression algorithms like gzip or brotli to reduce the size of assets served to the client.

```javascript
// Enable gzip/brotli compression
app.use(compression())
```

--------------------------------

### shortName

Source: https://tradex-app.github.io/TradeX-chart/api/core

Gets the user-defined short name of the chart.

```APIDOC
## shortName

### Description
User defined short chart name.

### Returns
`string` - user defined short chart name
```

--------------------------------

### Instantiate StateMachine

Source: https://tradex-app.github.io/TradeX-chart/reference/state_machine

Create a new instance of the StateMachine by providing a configuration object and a context object. The context must include a reference to the chart instance via 'context.core'.

```javascript
let stateMachine = new StateMachine(config, context)

```

```javascript
context.core = chart

```

--------------------------------

### Get Canvas Element

Source: https://tradex-app.github.io/TradeX-chart/reference/canvas_extension_layers

Retrieves the canvas HTML element.

```javascript
const canvas = scene.canvas;
```

--------------------------------

### Setup Basic Keyboard Shortcuts

Source: https://tradex-app.github.io/TradeX-chart/guides/recipes/keyboard-shortcuts

Attaches a keydown event listener to the document to handle basic chart navigation like zooming and scrolling. Prevent default behavior for keys used as shortcuts.

```javascript
function setupKeyboardShortcuts(chart) {
  document.addEventListener('keydown', (e) => {
    // Zoom
    if (e.key === '+' || e.key === '=') {
      e.preventDefault()
      chart.zoomIn()
    }
    if (e.key === '-' || e.key === '_') {
      e.preventDefault()
      chart.zoomOut()
    }
    
    // Scroll
    if (e.key === 'ArrowLeft') {
      e.preventDefault()
      chart.scrollLeft()
    }
    if (e.key === 'ArrowRight') {
      e.preventDefault()
      chart.scrollRight()
    }
    
    // Reset
    if (e.key === 'r' && e.ctrlKey) {
      e.preventDefault()
      chart.reset()
    }
  })
}

setupKeyboardShortcuts(chart)
```

--------------------------------

### Get Indicator Settings

Source: https://tradex-app.github.io/TradeX-chart/reference/indicators_custom

Retrieves the current settings of a specific indicator.

```APIDOC
## Get Indicator Settings

### Description
Retrieves the current settings of a specific indicator.

### Method
JavaScript

### Endpoint
chart0.getIndicator("INDICATOR_ID").settings()

### Parameters
None

### Response
- **settings** (object) - The current settings of the indicator.
```

--------------------------------

### Run Production Build

Source: https://tradex-app.github.io/TradeX-chart/guides/deployment/production-checklist

Execute the npm script to create an optimized production build of your application.

```bash
npm run build
```

--------------------------------

### Get Canvas Context

Source: https://tradex-app.github.io/TradeX-chart/reference/canvas_extension_layers

Retrieves the canvas context for drawing operations.

```javascript
const context = scene.context;
```

--------------------------------

### Get Viewport Index

Source: https://tradex-app.github.io/TradeX-chart/reference/canvas_extension_layers

Retrieves the unique index identifier for a viewport.

```javascript
const index = viewport.index;
```

--------------------------------

### Get Viewports

Source: https://tradex-app.github.io/TradeX-chart/reference/canvas_extension_layers

Retrieves an array of all instantiated viewports managed by CEL.

```javascript
const viewports = CEL.viewports;
```

--------------------------------

### Verify Production Build Output

Source: https://tradex-app.github.io/TradeX-chart/guides/deployment/production-checklist

List the contents of the distribution directory to verify the build output and check file sizes.

```bash
ls -lh dist/
# Check file sizes
```

--------------------------------

### Setup Apollo Client

Source: https://tradex-app.github.io/TradeX-chart/guides/backend/graphql-integration

Initialize an Apollo Client instance with the GraphQL endpoint, an in-memory cache, and authorization headers. This client will be used for making GraphQL queries.

```javascript
import { ApolloClient, InMemoryCache, gql } from '@apollo/client'

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache(),
  headers: {
    authorization: 'Bearer YOUR_API_KEY'
  }
})
```

--------------------------------

### Set/Get Indicator Visibility

Source: https://tradex-app.github.io/TradeX-chart/reference/api-examples

Shows how to get and set the visibility of an indicator.

```APIDOC
## Visible

### Description

Set or get the indicator visibility. The method accepts a boolean to set the indicator visibility and also returns a boolean of the current state. `true` visible `false` not visible.

### Methods

#### Get Visibility

```javascript
const visible = chart1.ChartPanes.get("TradeX_test-RSI__20_3").indicators["TradeX_test-RSI__20_3-RSI_5"].instance.visible()
```

#### Set Visibility

```javascript
// set indicator visibility to not visible (false)
chart1.ChartPanes.get("TradeX_test-RSI__20_3").indicators["TradeX_test-RSI__20_3-RSI_5"].instance.visible(false)
```
```

--------------------------------

### Multi-State Management with Timeframes

Source: https://tradex-app.github.io/TradeX-chart/reference/datasource

Shows how to switch between different timeframes, with DataSource automatically managing state transitions or creating new states.

```javascript
// Switch between timeframes
dataSource.timeFrame = '5m';  // Automatically manages state transitions
dataSource.timeFrame = '1h';  // Creates new state or switches to existing one
```

--------------------------------

### Check Node.js Version

Source: https://tradex-app.github.io/TradeX-chart/guides/development/local-setup

Verify that Node.js version 18.x or higher is installed.

```bash
# Check your version
node --version

# Should output v18.0.0 or higher
```

--------------------------------

### Run All Tests

Source: https://tradex-app.github.io/TradeX-chart/guides/development/local-setup

Execute all tests in the project using the configured testing framework.

```bash
npm test
```

--------------------------------

### Get Viewport Scene

Source: https://tradex-app.github.io/TradeX-chart/reference/canvas_extension_layers

Accesses the scene object of a viewport, where all layers are composited.

```javascript
const scene = viewport.scene;
```

--------------------------------

### Get Chart Version

Source: https://tradex-app.github.io/TradeX-chart/reference/api-examples

Retrieves the current version number of the TradeX-chart instance.

```javascript
chart0.version
// 0.139.8
```

--------------------------------

### Get State

Source: https://tradex-app.github.io/TradeX-chart/reference/state

Retrieves the internal data state object associated with a given key.

```APIDOC
## Get State

### Description
Return the specified internal data state object.

### Method
```javascript
const theState = chart.state.get(key)
```

### Parameters
#### Path Parameters
- **key** (string) - Required - The key of the state to retrieve.
```

--------------------------------

### jumpToEnd(centre)

Source: https://tradex-app.github.io/TradeX-chart/api/core

Sets the range start to the end of the state data. Allows centering the view.

```APIDOC
## jumpToEnd(centre)

### Description
Set Range start to state data end.

### Parameters
#### Path Parameters
- **centre** (boolean) - Optional, defaults to `true`. Center the range on the end value.
```
Tokens:
Raw