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:

import { pushTick } from "livecharts/data";

function onTick(price: number) {
  // Functional updater — safe inside WebSocket / useEffect handlers
  setData((prev) => pushTick(prev, price, { keepSecs: 120 }).data);
  setValue(price);
}

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 render. 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.