Skip to main content
Skip to main content

Realtime updates

History gets you on screen. Realtime updates keep the chart honest as prices move — without refetching thousands of old candles.

Loading chart…
Preview: ticks arrive every second and update the last bar. Your feed can be WebSocket, polling, or a Data Connector.

Two kinds of live data​

What arrivesMethodPlain English
One price nowappendTick()“Last traded price just changed”
One finished barappendMainSeriesData()“This hour’s candle just closed”

Most apps use ticks during the session and candles when a bar completes.

Append a single tick​

chart.appendTick({
  stamp: Date.now(),
  price: 102.45,
  v: 120,
});

The chart updates the current candle or starts a new one based on stamp and your interval.

From a WebSocket​

socket.onmessage = (event) => {
  const tick = JSON.parse(event.data);

  chart.appendTick({
    stamp: tick.stamp,
    price: tick.price,
    v: tick.volume ?? 0,
  });
};

Tutorial walkthrough: Live data stream.

Append many ticks at once​

Bursts from a feed or replay? Batch them:

chart.appendTicks(ticks);

Tip: Very fast feeds (50+ per second) — batch in your app every ~100 ms, then call appendTicks once. Smoother chart, less CPU.

Append a complete new candle​

When your backend sends a closed bar:

chart.appendMainSeriesData([
  {
    stamp: 1715479200000,
    o: 103.9,
    h: 104.7,
    l: 103.4,
    c: 104.3,
    v: 2800,
  },
]);

Indicators recalculate automatically.

Live data with a Data Connector​

Skip manual appendTick — subscribe and let the connector push:

chart.subscribeToUpdates("BTCUSDT", (tick) => {
  console.log("Last:", tick.c);
});

Setup: Connect with a Data Connector.

Recalculate indicators on every tick?​

By default, scripts may not rerun on every tiny tick (saves CPU). Pass true to force recalculation:

chart.appendTick({ stamp: Date.now(), price: 99.5 }, true);

Use when indicators must track every wiggle — otherwise leave the default.

Clean up live connections​

socket.close();
chart.destroy();

Always tear down WebSockets when the user leaves the page.

Tick vs candle — decision tree​

flowchart TD
  Q["What did your feed send?"]
  T["Single price update"] --> AT["appendTick"]
  C["Full OHLC bar closed"] --> AM["appendMainSeriesData"]
  Q --> T
  Q --> C

What is next?​