Minimal Setup

The smallest possible ChartGPU chart — one candlestick panel, no configuration required.

Pan with mouse drag · scroll to zoom · hover for crosshair and OHLC tooltip.

Code

import { Chart, CandlePanel } from 'chartgpu';

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  },
  // ...
];

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

The Chart constructor accepts a CSS selector or an HTMLElement. The second argument is the initial data and timeframe — everything else is optional.

What you get for free

• WebGPU-accelerated candlestick rendering
• Mouse / touch pan and pinch-zoom
• Crosshair with OHLC tooltip
• Price and time axes
• Automatic resize via ResizeObserver
• Native-resolution rendering on all HiDPI / Retina screens

Timeframe options

const chart = new Chart('#chart', { candles, timeframe: '5m' });
// '1m' | '5m' | '15m' | '1h' | '4h' | '1d'

Cleanup

chart.destroy(); // removes canvases, cancels RAF, disconnects stream