Data helpers

import { pushTick, createWalker, aggregateCandles } from "livecharts/data";

Tree-shake friendly — does not pull in the canvas engine.

pushTick

Append a live reading and trim history older than keepSecs (default 120). Immutable — does not mutate the input array.

function pushTick(
  data: LiveChartPoint[],
  value: number,
  options?: { keepSecs?: number; time?: number }
): { data: LiveChartPoint[]; value: number };

// Prefer a functional updater so async handlers never read stale `data`
setData((prev) => pushTick(prev, price, { keepSecs: 120 }).data);
setValue(price);

time defaults to Date.now() / 1000 (unix seconds).

createWalker

Random-walk generator for demos, stress tests, and prototyping.

interface WalkerConfig {
  start: number;
  damping?: number; // default 0.96
  volatility?: number; // default 0.02
  spikeProbability?: number; // default 0.005
  spikeMagnitude?: number; // default 0.1
  min?: number;
  max?: number;
  historyDuration?: number; // seeded window seconds (default 30)
  historyPoints?: number; // seeded density (default 300)
  trimAfter?: number; // drop older than now - trimAfter (default 1.5 × historyDuration)
}

interface Walker {
  history: LiveChartPoint[];
  value: number;
  tick: () => { history: LiveChartPoint[]; value: number };
}

const walker = createWalker({ start: 125, damping: 0.95, volatility: 0.012 });
const { history, value } = walker.tick();

Each tick() appends a point at Date.now() / 1000 and trims history older than trimAfter.

aggregateCandles

Bucket tick history into OHLC candles.

function aggregateCandles(
  ticks: LiveChartPoint[],
  widthSecs: number
): { candles: CandlePoint[]; live: CandlePoint | null };

Return	Meaning
`candles`	Completed buckets
`live`	Current open bucket, or `null` if no ticks

Empty ticks or non-positive widthSecs → { candles: [], live: null }.

const { candles, live } = aggregateCandles(ticks, 60);

<LiveChart
  data={ticks}
  value={ticks.at(-1)!.value}
  mode="candle"
  candles={candles}
  liveCandle={live ?? undefined}
  candleWidth={60}
/>

Data helpers

pushTick

createWalker

aggregateCandles

On this page