Getting Started

ChartGPU is a high-performance financial charting library powered by WebGPU. It renders candlestick charts on the GPU, making it capable of handling large datasets and high-frequency real-time data without frame drops.

Requirements

• A browser with WebGPU support (Chrome 113+, Edge 113+, Safari 18+)
• Node.js 18+ for building

Quick Start

1. Install

npm install chartgpu

2. Create a chart

<div id="chart" style="width: 100%; height: 500px; position: relative;"></div>

import {
  Chart,
  CandlePanel, VolumePanel, RSIPanel, MACDPanel,
  SMAIndicator, EMAIndicator,
} from 'chartgpu';

// Your candle data
const candles = [
  { open: 100, high: 105, low: 98,  close: 103, timestamp: 1700000000000, volume: 120000 },
  { open: 103, high: 108, low: 101, close: 106, timestamp: 1700000060000, volume: 95000  },
  // ...
];

// Create the chart
const chart = new Chart('#chart', { candles, timeframe: '1m' });

// Add panels
const candle = new CandlePanel();
candle.addIndicator(new SMAIndicator(20));
candle.addIndicator(new EMAIndicator(50));

chart
  .addPanel(candle)
  .addPanel(new VolumePanel())
  .addPanel(new RSIPanel(14))
  .addPanel(new MACDPanel(12, 26, 9));

That's it. The chart mounts itself, handles resize automatically via ResizeObserver, and begins WebGPU rendering.

Live Streaming

Append candles in real time:

setInterval(() => {
  const last = chart.getCandles().at(-1)!;
  chart.appendCandle({
    open:      last.close,
    close:     last.close + (Math.random() - 0.5) * 2,
    high:      last.close + Math.random() * 1.5,
    low:       last.close - Math.random() * 1.5,
    timestamp: last.timestamp + 60_000,
    volume:    Math.floor(50_000 + Math.random() * 200_000),
  });
}, 1000);

The viewport automatically follows the latest candle if the user is scrolled to the end.

Next Steps

• Installation options — CDN, npm, manual build
• Architecture — understand panels, indicators, and tools
• API reference — full Chart API