Real-Time Streaming

ChartGPU accepts an async generator of candles. New candles append to the right and scroll the viewport automatically. Hit Start Live Feed to see it in action.

Connecting a stream

import { Chart, CandlePanel, VolumePanel } from 'chartgpu';

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

async function* tickStream() {
  while (true) {
    const tick = await fetchNextTick(); // your data source
    yield tick; // { open, high, low, close, timestamp, volume }
  }
}

const disconnect = chart.connectStream(tickStream());

// later
disconnect();

The generator can yield individual candles or batches. ChartGPU merges each tick into the candle array and redraws automatically — you never call redraw() yourself.

Disconnecting

connectStream returns a disconnect function. Call it to stop consuming from the generator:

const disconnect = chart.connectStream(stream);

// stop
disconnect();

The generator itself is not closed — if you want to stop the source, signal it yourself (e.g. with a flag inside the generator).

WebSocket example

async function* wsStream(url: string) {
  const ws = new WebSocket(url);
  const queue: MessageEvent[] = [];

  ws.addEventListener('message', e => queue.push(e));

  while (true) {
    if (queue.length) {
      const msg = queue.shift()!;
      yield JSON.parse(msg.data); // { open, high, low, close, timestamp, volume }
    } else {
      await new Promise(r => setTimeout(r, 50));
    }
  }
}

chart.connectStream(wsStream('wss://your-feed/btcusdt'));