Live Line Chart

Installation

pnpm add @blakeui/pro-react

npm install @blakeui/pro-react

yarn add @blakeui/pro-react

bun add @blakeui/pro-react

Usage

LiveLineChart is built on visx time scales and the motion library. It is a single component: grid, axes, tooltip, live dot, and momentum colouring are all props, not composable children.

You own the stream. The chart holds no interval and generates no data — it takes a growing data array and renders a moving window over it. Append points as they arrive from your WebSocket, poll, or SSE connection.

import {LiveLineChart} from "@blakeui/pro-react";

const [data, setData] = useState([]);
const [value, setValue] = useState(0);

useEffect(() => {
  const id = setInterval(() => {
    const next = readLatestMetric();
    setData((previous) => [...previous, {time: Date.now() / 1000, value: next}].slice(-240));
    setValue(next);
  }, 500);
  return () => clearInterval(id);
}, []);

<LiveLineChart data={data} value={value} window={30} />;

Data and value

data is an array of {time, value} sorted oldest-first, where time is Unix seconds — not milliseconds. value is passed separately, and that separation is the point: data is committed history, while value is the target the live tip eases toward. Between arrivals the dot keeps moving toward value instead of sitting still and then jumping, which is what makes the chart read as live rather than as a chart that redraws twice a second.

Updating value without appending to data is a normal, supported case — the tip, its readout, and the dashed value rule all move; the committed line does not.

Cap your buffer

The chart never mutates data, so nothing stops it growing forever. Slice it on every append. A good default is a few multiples of the visible window — enough history that a paused chart still has real data behind it when it resumes, without unbounded growth on a page left open.

The time window

window is the visible span in seconds; older points scroll off the left edge. Rendering cost is set by what is on screen, not by how much history you hold — the chart binary-searches to the window start, so passing 10,000 points costs the same as passing 100.

nowOffsetUnits leaves a leading gap between the live tip and the right edge, measured in x-tick units. At the default numXTicks={5} one unit is a quarter of the plot, so nowOffsetUnits={1} puts the tip at 75% width and fades the line out across the gap ahead of it. At the default of 0 the tip sits hard against the right edge and there is no leading fade.

Pausing

Set paused to freeze the window. The "now" marker and the domain stop advancing, but new data still appends and still widens the y-domain — so nothing is lost while paused. Releasing it snaps the domain forward to the current time rather than replaying the backlog.

Momentum

Set momentum to colour the line, area, and live dot by short-term trend: --chart-1 while rising, --chart-2 while falling, and the base stroke when flat. The trend compares the last five samples' net change against 12% of the local peak-to-trough range, so a quiet series reads as flat instead of flickering on noise.

Motion

The window slides on an animation frame loop, independent of when data arrives, so the chart scrolls smoothly rather than stepping. Interpolation is time-based, not per-frame, which keeps the scroll rate identical across refresh rates and through dropped frames. The y-domain is deliberately asymmetric: it snaps open the instant a new extreme arrives, so an incoming spike is never clipped, and eases closed when that extreme scrolls away, so the chart does not lurch every time a peak leaves the window.

The loop is suspended while the chart is scrolled out of view and snaps to the current state when it returns — an off-screen chart neither burns frames nor accumulates a backlog to animate through.

Under prefers-reduced-motion all continuous motion is suppressed: no sliding window, no interpolation between arrivals, no pulsing dot. The chart still steps as each point lands. A live chart has no final state to snap to, and freezing it would hide current data — accessibility must not cost the reader information.

The chart exposes the live value, and the hovered value while scrubbing, to assistive tech through a polite live region. Left/right arrows move the crosshair, Home and End jump to the window edges, and Escape clears it.

Reading the crosshair

The hovered value is interpolated along the line rather than snapped to the nearest sample, and it is re-read every frame. A stationary pointer therefore reports a changing time and value as the window slides beneath it — that is the chart being live, not the tooltip drifting.

Connecting state

LiveLineChart has no loading status of its own — a live chart's loading state is just a line. Render a loading LineChart while the stream connects, then swap in the live chart once data starts arriving.

API Reference

LiveLineChart

The single chart component. Measures its container, slides a time-domained window over data, interpolates the live tip toward value, and renders the series, axes, hover layer, and readout.

Also supports all native div HTML attributes.

LiveLineChartPoint

Each entry in data is one sample of the stream.