Introduction
Real-time animated canvas charts with a framework-agnostic engine
LiveCharts draws a live line that moves smoothly as new data arrives. One <canvas>, one requestAnimationFrame loop, opt-in features on top.
It is built for streaming feeds — prices, sensors, heart rate, prediction markets — where the chart must feel continuous even when ticks arrive irregularly.
Why LiveCharts
Most charting libraries are either too heavy for a simple live feed, or too rigid to feel alive. LiveCharts does one job well:
- Interpolate toward new values at ~60fps (
lerpSpeed, default0.08) - Snap the Y-axis outward instantly when data exceeds the range (never clip the line)
- Keep chrome (badge, grid, value overlay) in the same motion language
Everything else — momentum arrows, orderbook labels, candlesticks, multi-series, particles — is opt-in.
Bundle size
Separate entry points keep unused frameworks out of your app. Sizes below are measured automatically on each livecharts build (ESM, gzip -9). React / Vue are peers and are not counted.
| Import | Minified | Gzip | Notes |
|---|---|---|---|
livecharts | 134 KB | 29 KB | Engine + theme helpers |
livecharts/react | 159 KB | 34 KB | React binding (engine inlined; react is peer) |
livecharts/vue | 164 KB | 35 KB | Vue binding (engine inlined; vue is peer) |
livecharts/data | 2.8 KB | 0.9 KB | Helpers only — no canvas engine |
Measured from published ESM build (ESM dist, gzip -9; framework peers not included). v0.1.2 · React / Vue are peer dependencies and are not included.
Install
npm install livechartsPackage layout
| Import | What you get |
|---|---|
livecharts/react | <LiveChart />, LiveChartTransition, useLiveChartEngine |
livecharts/vue | <LiveChart />, LiveChartTransition, useLiveChartEngine |
livecharts | LiveChartEngine, theme helpers, shared types |
livecharts/data | createWalker, aggregateCandles (no canvas engine in the bundle) |
React is a peer dependency (react ≥ 18) for livecharts/react. Vue ≥ 3.4 is optional for livecharts/vue. The engine itself is framework-agnostic — see the roadmap for Astro/HTML and design-system kits.
Feature map
| Area | Start here |
|---|---|
| Install & first chart | Getting started |
| Points, series, candles | Data model |
| Lerp, range, pause/resume | Animation |
| Live feeds & walkers | Feeding data |
| Themes & accent color | Theming |
| Full prop tables | LiveChart API |
Prefer a long-form walkthrough with live examples? Open the interactive demo — the same charts are also embedded throughout these docs.
Attribution
The canvas engine is based on Liveline by Benji Taylor (MIT). LiveCharts extracts a framework-agnostic core and ships React / Vue bindings, data helpers, and docs on top. Full notices: npm LICENSE.