API
LiveChartEngine
Framework-agnostic canvas engine API
import { LiveChartEngine, resolveTheme } from "livecharts";
import type { EngineConfig } from "livecharts";Construct
const engine = new LiveChartEngine({
canvas, // HTMLCanvasElement
container, // HTMLElement — hosts badge DOM overlay
valueDisplay, // optional HTMLElement for showValue text
});Lifecycle
engine.setConfig(config); // EngineConfig
engine.start(); // begin rAF loop
engine.stop(); // pause loop (keeps state)
engine.destroy(); // tear down listeners, badge DOM, loop
engine.setScrubX(x); // programmatic scrub (CSS px) or null to clear — keyboard a11y
engine.getSize(); // { w, h } of the canvas containerCall setConfig whenever data or options change. The React wrapper does this after every render.
EngineConfig (summary)
Mirrors <LiveChart /> capabilities at a lower level:
| Area | Fields |
|---|---|
| Data | data, value, multiSeries, isMultiSeries, hiddenSeriesIds |
| Look | palette, showGrid, showBadge, showFill, showPulse, badgeTail, badgeVariant |
| Motion | windowSecs, lerpSpeed, exaggerate, degenOptions |
| Momentum | showMomentum, momentumOverride |
| Interaction | scrub, onHover, tooltipY, tooltipOutline |
| State | loading, paused, emptyText, pauseWhenOffscreen |
| Extras | referenceLine, orderbookData, formatValue, formatTime, padding, valueDisplay |
| Candles | mode, candles, candleWidth, liveCandle, deprecated lineMode / lineData / lineValue |
Build palette with resolveTheme.
When to use the engine directly
- Non-React hosts (vanilla, other frameworks)
- Custom chrome around the canvas
- Sharing one engine across unusual layouts
For normal React apps prefer <LiveChart /> or useLiveChartEngine.