Feeding live data

Push model

LiveCharts is a push chart: you update data and value whenever you have a new reading. The engine interpolates between paints.

Prefer pushTick so you do not hand-roll trim logic (same helper as React — livecharts/data):

import { pushTick } from "livecharts/data";

function onTick(price: number) {
  const next = pushTick(data.value, price, { keepSecs: 120 });
  data.value = next.data;
  value.value = next.value;
}

createWalker

createWalker from livecharts/data builds a seeded random walk for demos and stress tests:

import { createWalker } from "livecharts/data";

const walker = createWalker({
  start: 100,
  damping: 0.95, // velocity decay
  volatility: 0.02, // step noise
  spikeProbability: 0.005,
  spikeMagnitude: 0.1,
  min: 0,
  max: 200,
  historyDuration: 30, // seed window (seconds)
  historyPoints: 300,
  trimAfter: 45, // drop older points on tick
});

const { history, value } = walker.tick();

Call tick() on an interval (or randomly) and pass the result into <LiveChart />.

Full options: Data helpers.

Irregular intervals

Real feeds are gappy: reconnects, batch flushes, mobile stalls. LiveCharts still interpolates across uneven gaps. You do not need to densify ticks client-side unless you want a denser trail for scrubbing.

Patterns that work well:

Always pass value

Even if the latest point is in data, pass value every update. The live tip, badge, and overlays key off it.

Multi-series & candles

• Multi-series: update each series’ data/value together (per-series pushTick works fine).
• Candles: keep tick history for the line morph, and rebuild candles / liveCandle with aggregateCandles when the forming bucket changes.