Liveline
16 February, 2026
Liveline is a real-time animated line chart component for React. One canvas, no dependencies beyond React 18, smooth interpolation at 60fps.
Degen mode (chart shake and particles) with momentum arrows.
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.
Getting started
1 npm install liveline
The component fills its parent container. Set a height on the wrapper. Data is an array of { time, value } points. Value is the latest number. Feed it data however you like—WebSocket, polling, or random walk.
import { Liveline } from ‘liveline’
function Chart({ data, value }) {
return (
<div style={{ height: 200 }}>
<Liveline data={data} value={value} />
</div>
)
}
Momentum
The momentum prop adds directional feedback to the live dot. Green for up, red for down, grey for flat. Arrows fade out fully before the new direction fades in.
Value overlay
showValue renders the current value as a large number over the chart. Pair it with momentum colouring to tint the number based on direction.
Time windows
Choose a time horizon using the compact controls. Each option changes how much history is visible in the live feed.
Orderbook
Streaming bid and ask activity appears behind the line. Bigger orders appear brighter, while the stream responds to momentum and market churn.
Candlestick
The live candle updates in real time, growing its wicks as new ticks arrive. Use the built-in control to switch between line and candlestick views.
Multi-series
Draw multiple overlapping lines, each with its own colour. Click the chips to highlight Yes, No, or Maybe.
States
Real apps do not start with data ready. The loading state breathes while waiting, then morphs into the live chart. Pause freezes the view while updates continue in the background.
Theming
Pass any colour and the chart derives its full palette: line, fill gradient, glow, badge, and grid labels.
More features
Everything is off by default or has sensible defaults. Exaggerate tightens the Y-axis range. Scrub shows a crosshair with time and value tooltips. Degen enables burst particles and chart shake. Badge variants provide quieter display options.
How it works
One canvas, one requestAnimationFrame loop. When a new value arrives, nothing jumps. The chart interpolates toward the new state; the range, badge, and labels all move together, making the interface feel like one thing breathing.
Props
Data
data LivelinePoint[] required
value number required
Appearance
theme light | dark dark
color string #3b82f6
grid boolean true
badge boolean true
fill boolean true
pulse boolean true
lineWidth number 2
Features
momentum boolean | Momentum true
scrub boolean true
exaggerate boolean false
showValue boolean false
degen boolean | Options false
State
loading boolean false
paused boolean false
emptyText string No data to display
Time
window number 30
windows WindowOption[]
windowStyle default | rounded | text
Advanced
referenceLine ReferenceLine
lerpSpeed number 0.08
cursor string crosshair
Stress testing
A chart that only looks good on calm data is not much use. These demos throw wild volatility, sharp direction changes, isolated spikes, and irregular arrival times at it.
Just a line
Liveline can do a lot. Momentum arrows, particles, orderbooks, scrubbing, and time windows. But if you just want a line that moves when a number changes, it does that just fine too.
Acknowledgements
Inspired by Polymarket’s real-time prediction charts and their 15-minute Bitcoin price windows.
Thanks to Shayne Coplan for reviewing an early version of this.
Acknowledgements
Inspired by Polymarket’s real-time prediction charts and their 15-minute Bitcoin price windows.
Thanks to Shayne Coplan for reviewing an early version of this.
Acknowledgements
Inspired by Polymarket’s real-time prediction charts and their 15-minute Bitcoin price windows.
Thanks to Shayne Coplan for reviewing an early version of this.
Acknowledgements
Inspired by Polymarket’s real-time prediction charts and their 15-minute Bitcoin price windows.
Thanks to Shayne Coplan for reviewing an early version of this.
Acknowledgements
Inspired by Polymarket’s real-time prediction charts and their 15-minute Bitcoin price windows.
Thanks to Shayne Coplan for reviewing an early version of this.