ChartGPU

High-performance financial charting library powered by WebGPU. Renders candlesticks on the GPU — handles thousands of candles and high-frequency real-time feeds without frame drops.

Live Demo · Docs

Install

npm install chartgpu

Requires a WebGPU-capable browser: Chrome 113+, Edge 113+, Safari 18+.

Quick Start

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

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

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

const candle = new CandlePanel();
candle.addIndicator(new SMAIndicator(20, { color: '#f59e0b' }));
candle.addIndicator(new EMAIndicator(50, { color: '#a78bfa' }));

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

The chart mounts itself, handles resize automatically, and begins GPU rendering. No configuration needed beyond passing your candle data.

Features

Chart types

• Candlestick, OHLC, Line, Area, Baseline

Panels

• Volume, RSI, MACD — each with its own Y axis and proportional height

Indicators (overlay on price panel)

• SMA, EMA, Bollinger Bands, Volume Profile

Drawing tools

• Trend Line, Horizontal Ray
• Fibonacci Retracement (7 levels, color-coded)
• Rectangle (drag to annotate a price/time region)
• Parallel Channel (3-click tool with midline and fill)

Data & UX

• Data decimation — pixel-aligned OHLC merge keeps render cost constant regardless of dataset size
• Log scale — toggle between linear and logarithmic Y axis
• Theme API — built-in dark/light themes, fully customizable
• Multiple Y axes — overlay a second series (e.g. ETH on a BTC chart) with its own independent scale
• Live streaming — connectStream() accepts a WebSocket or async iterable, handles append-vs-update automatically
• Touch & pinch zoom — full mobile support

Live Streaming

// WebSocket
const disconnect = chart.connectStream(new WebSocket('wss://your-feed/candles'));

// Async iterable
const disconnect2 = chart.connectStream(myAsyncGenerator());

// Stop
disconnect();

Incoming candles with the same timestamp update the last candle in place (tick update). Newer timestamps append a new candle.

Themes

import { darkTheme, lightTheme, type ChartTheme } from 'chartgpu';

chart.setTheme(lightTheme);

// Custom theme (partial override)
chart.setTheme({ ...darkTheme, bull: '#00c087', bear: '#ff5757' });

Drawing Tools

import { FibonacciRetracement, Rectangle, ParallelChannel, TrendLine } from 'chartgpu';

const fib = new FibonacciRetracement();
chart.addTool(fib);

// Activate (only one tool active at a time)
fib.active = true;
chart.activateTool(fib);

// Deactivate
fib.active = false;
chart.activateTool(null);

Overlay Panel (Secondary Y Axis)

import { OverlayPanel } from 'chartgpu';

const eth = new OverlayPanel({ color: '#f472b6', label: 'ETH', side: 'left' });
eth.setData(ethCandles);
chart.addOverlay(eth);

Volume Profile

import { VolumeProfileIndicator } from 'chartgpu';

const vp = new VolumeProfileIndicator({ buckets: 40 });
candlePanel.addIndicator(vp);

Draws a horizontal histogram on the right edge showing volume by price level. The Point of Control (highest-volume bucket) is highlighted.

TypeScript

Fully typed. All classes, options, and events have complete declarations.

import type { Candle, ChartTheme, DrawState } from 'chartgpu';

Custom Panels & Indicators

Extend Panel or Indicator to build your own:

import { Indicator, type DrawState } from 'chartgpu';

export class VWAPIndicator extends Indicator {
  readonly legendName = 'VWAP';

  legendValue(candles: Candle[], idx: number) {
    // return string value at idx for legend display
    return null;
  }

  draw(state: DrawState): void {
    const { ctx, candles, viewport, section, chartWidth, paddingX, priceRange } = state;
    // draw on ctx using the provided coordinates
  }
}

candlePanel.addIndicator(new VWAPIndicator());

Browser Support

| Browser | Version | |---|---| | Chrome / Edge | 113+ | | Safari | 18+ | | Firefox | Nightly (WebGPU behind flag) |

Falls back gracefully — the GPU canvas is simply hidden if WebGPU is unavailable, and Canvas2D rendering still works for all panel types except CandlePanel.

License

MIT