Architecture

Layers

┌─────────────────────────────────────┐
│  React: <LiveChart />               │  props → EngineConfig
│  LiveChartTransition (optional)     │
│  useLiveChartEngine (low-level)     │
├─────────────────────────────────────┤
│  LiveChartEngine (livecharts)       │  rAF loop, state, draw
├─────────────────────────────────────┤
│  Canvas 2D + badge DOM overlay      │
└─────────────────────────────────────┘

• LiveChartEngine owns animation state, drawing, badge DOM, orderbook particles, and hover.
• <LiveChart /> maps React props to EngineConfig, manages window/mode UI chrome, and series toggle state.
• livecharts/data is optional helpers with no canvas dependency.

Why the badge and value overlay are not React state

The live value badge and showValue overlay update every frame via direct DOM writes. That avoids React re-renders at 60fps while keeping numbers in sync with the canvas.

Host responsibilities

Your app owns:

1. Fetching / streaming data
2. Trimming history (walkers do this for demos; production feeds should bound memory)
3. Passing fresh data + value (or series / candles) each update

The engine owns: interpolation, range, scrubbing, theming palette derivation, and drawing.

Framework-agnostic core

Anything that can host a canvas can drive LiveChartEngine:

import { LiveChartEngine, resolveTheme } from "livecharts";

const engine = new LiveChartEngine({ canvas, container });
engine.setConfig({ /* EngineConfig */ });
engine.start();
// later
engine.destroy();

See LiveChartEngine and useLiveChartEngine. Vue bindings: livecharts/vue.

Performance notes

• Prefer updating props at your feed rate (e.g. 4–20 Hz); the engine paints at display refresh.
• Keep history bounded (createWalker trims via trimAfter; do the same for WebSockets).
• Multi-series and orderbook add draw cost — still one canvas, but more paths per frame.
• pauseWhenOffscreen keeps background tabs cheaper.

Attribution

Drawing and animation core started from Liveline (Benji Taylor, MIT). This package splits that engine from React, adds Vue / data entries, and documents the public API. Notices ship in the published LICENSE.