Demo

LiveCharts is a real-time animated charting library with a framework-agnostic canvas engine and React bindings. One <canvas>, smooth interpolation at 60fps.

Everything else is opt-in: momentum, orderbook, candlesticks, multi-series, particles.

Getting started

npm install livecharts

The component fills its parent. Set a height on the wrapper.

import { LiveChart } from "livecharts/react";

function Chart({ data, value }) {
  return (
    <div style={{ height: 200 }}>
      <LiveChart data={data} value={value} />
    </div>
  );
}

data is an array of { time, value } points (unix seconds). value is the latest number.

Feed it however you like — WebSocket, polling, random walk. LiveCharts interpolates between updates.

Momentum

The momentum prop adds directional arrows to the live tip. Pass true to auto-detect, or force "up" / "down" / "flat".

Value overlay

showValue renders the current value as a large number over the chart via DOM (not React re-renders). Pair with valueMomentumColor to tint by direction.

Time windows

Pass a windows array for horizon buttons. Styles: "default", "rounded", "text".

<LiveChart
  windows={[
    { label: "1m", secs: 60 },
    { label: "5m", secs: 300 },
  ]}
  windowStyle="rounded"
/>

Reference line

referenceLine={{ value, label? }} draws a horizontal threshold.

Orderbook

Pass orderbook with bids / asks as [price, size][]. Labels spawn, drift, and fade — speed reacts to momentum and churn.

Candlestick

OHLC candles with a live forming candle. Built-in toggle morphs between line and candle views.

Multi-series

Pass series to draw overlapping lines with toggle chips.

States

loading shows a breathing placeholder that morphs into data. paused freezes the view; resume fades or morphs depending on how long you were away.

Theming

Pass any CSS color to color — LiveCharts derives the palette. theme switches light / dark chrome.

More features

• exaggerate — tighten Y-range for small moves
• scrub — crosshair tooltips (on by default)
• degen — particles + shake on swings
• badgeVariant="minimal" or badge={false}

How it works

One canvas, one requestAnimationFrame loop. Display state lerps toward new values (lerpSpeed, default 0.08). The Y-range snaps outward instantly so the line is never clipped.

Stress testing

Charts that only look good on calm data are not useful.

Sharp reversals, isolated spikes, and chaos:

Irregular arrival — gaps and bursts:

Just a line

If you only want a line that moves when a number changes:

Next steps