Liveline is a real-time animated line chart component for React. One <canvas>, no dependencies beyond React 18, smooth interpolation at 60fps.

I built this because every charting library I tried was either too heavy for a simple live feed, or too rigid to feel alive. Liveline does one thing: draw a line that moves smoothly as new data arrives. Everything else is opt-in.

npm install liveline

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

import { Liveline } from 'liveline'
 
function Chart({ data, value }) {
  return (
    <div style={{ height: 200 }}>
      <Liveline data={data} value={value} />
    </div>
  )
}

data is an array of { time, value } points. value is the latest number.

Feed it data however you like. WebSocket, polling, random walk. Liveline interpolates between updates so even infrequent data looks smooth. It works for anything with a value that changes over time.

The momentum prop adds directional arrows to the live dot. Green for up, red for down, grey for flat. Pass true to auto-detect direction, or force it with "up", "down", or "flat".

showValue renders the current value as a large number over the chart. It updates at 60fps through direct DOM manipulation, not React re-renders. Pair it with valueMomentumColor to tint the number based on direction.

Pass a windows array to render time horizon buttons. Each entry has a label and secs value. Three styles are available via windowStyle: "default", "rounded", and "text".

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

referenceLine draws a horizontal line at a fixed value. Pass an object with value and an optional label.

Pass an orderbook prop with bids and asks arrays to render streaming order labels behind the line. Each entry is a [price, size] tuple. Labels spawn at the bottom, drift upward, and fade out. Green for bids, red for asks. Bigger orders appear brighter.

The stream speed reacts to price momentum and orderbook churn (how much the bid/ask totals are changing). Calm markets drift slowly, volatile ones rush.

Pass OHLC data to render candlesticks. The live candle keeps updating in real time, growing its wicks as new ticks arrive. A built-in toggle morphs between line and candlestick views.

Real apps don't start with data ready. Set loading to show a breathing line animation while you wait for a connection. When data arrives, the flat line morphs smoothly into the actual chart. If data never arrives, Liveline falls back to a quiet empty state. Customise the message with emptyText.

paused freezes the chart in place while data continues arriving in the background. When you resume, it catches up to real time.

Pass any CSS colour string to color and Liveline derives the full palette. Line, fill gradient, glow, badge, grid labels. It converts the input to HSL and generates every variant from there.

Everything is off by default or has sensible defaults. A few more things you can turn on:

• exaggerate tightens the Y-axis range so small movements fill the full chart height. Useful for values that move in tiny increments, like the heart rate demo above.
• scrub shows a crosshair with time and value tooltips on hover. On by default.
• degen enables burst particles and chart shake on momentum swings. For when subtlety is not the goal.
• badgeVariant="minimal" renders a quieter white pill instead of the accent-colored default. Or badge={false} to remove it entirely.

One <canvas>, one requestAnimationFrame loop. When a new value arrives, nothing jumps. The chart lerps toward the new state at 8% per frame (lerpSpeed). The Y-axis range, the badge, the grid labels all use the same lerp. The range snaps outward instantly when data exceeds it, so the line is never clipped. That's why it feels like one thing breathing rather than a bunch of parts updating independently.

Sharp reversals are the classic breaking point. The first chart hammers the line with frequent direction changes at 60ms. The second holds nearly flat, then fires massive isolated spikes. The third is just chaos.

Real-world data doesn't arrive at regular intervals. WebSocket connections drop, batch updates land all at once, mobile networks stall. This one simulates that: long quiet stretches of 1-3 seconds between points, then sudden bursts at 40-80ms. The tick interval itself is random.

Liveline can do a lot. Momentum arrows, particles, orderbooks, scrubbing, time windows. But at the end of the day, if you just want a line that moves when a number changes, it does that just fine too.