Liveline
github.com/benjitaylor/liveline- Category
- Developer Tools
- Rank
- No. 641Tools index
- Pricing
- Open Source
- Platform
- web
- Type
- TOOL
- Builder
- @benjitaylor
- GitHub
- 946 stars
- Date
About
A React component library for creating real-time animated line charts with 60fps canvas rendering. Features smooth interpolation, candlestick mode, multi-series support, and zero CSS imports for displaying live data streams.
What it does
Liveline turns timestamped values into a React chart that continuously follows the newest reading. Feed it growing point arrays, current values, OHLC bars, or several named series. It supplies interpolation, hover inspection, time-window controls, loading and paused states, responsive sizing, and configurable visual treatments.
Why it's ranked here
Liveline has unusually focused mechanics for live dashboards. Monotone splines prevent curve overshoot, interpolation accounts for frame timing, hidden tabs pause the animation loop, and container tracking avoids repeated layout reads. The scope is narrow, but the implementation addresses the awkward details that make streaming charts feel stable.
What's good
One component covers line, candlestick, and overlapping-series displays. Candles can morph into a tick-level line, while hidden series fade and trigger a revised vertical range. Hover values use interpolation, large live labels update without React rerenders, and loading states transform into chart shapes instead of abruptly switching.
Tradeoffs
React 18 or newer is required, and consumers must provide the live data transport, aggregation, and parent height. Multi-series mode disables fill, momentum arrows, and the value badge. The built-in themes are limited to light and dark, while color parsing directly handles hex and RGB forms and falls back to gray otherwise.
How to use it well
Use Liveline in React dashboards that already receive timestamped ticks, OHLC bars, or several comparable streams. Keep data acquisition and candle bucketing outside the component, size its parent explicitly, and use its formatters and callbacks for product-specific labels and interactions. It does not replace a data source, storage layer, or broad analytical charting suite.
Technical notes+
package.json defines an ESM package with React 18 as its sole peer dependency, Node 18 as the engine floor, side effects disabled, and separate import, require, and declaration export mappings. src/index.ts exports the main component, a cross-fade wrapper, and public types. src/Liveline.tsx normalizes props, derives palettes, manages control state, and delegates rendering to src/useLivelineEngine.ts. That engine coordinates animation, range transitions, hover state, DOM badge updates, candles, and multiple series. src/math/lerp.ts implements delta-time-adjusted exponential interpolation. src/draw/line.ts builds screen-space points and spline strokes, while src/canvas/dpr.ts caps device-pixel-ratio scaling at three.
Observed
- License
- MIT
- Primary language
- TypeScript and TSX
- Install surface
- Published package installed with pnpm add liveline
- Interface
- React component library with exported TypeScript types
- Runtime dependency surface
- React 18 or newer is the sole peer dependency
- Package formats
- ES module and CommonJS entry mappings with declarations
- Platform requirement
- Node.js 18 or newer is declared
- Package contents
- Distribution output, README, and license are included in the published package
Read from README.md, package.json, src/index.ts, src/theme.ts, src/types.ts, src/Liveline.tsx, src/useLivelineEngine.ts, src/LivelineTransition.tsx, src/draw/dot.ts, src/draw/grid.ts, src/draw/line.ts, src/math/lerp.ts, src/draw/index.ts, src/canvas/dpr.ts, src/draw/badge.ts.
What it can do
Render real-time animated line charts
Live data streams → 60fps canvas-rendered line charts
Create candlestick charts for financial data
OHLC (Open, High, Low, Close) data points → Real-time candlestick visualizations
Display multi-series data on single chart
Multiple data series/streams → Overlaid animated chart with multiple lines
Apply smooth interpolation to data points
Raw data points with gaps or irregular intervals → Smoothly animated transitions between data points
Generate momentum indicators
Time series data → Visual momentum indicator overlays on charts
Integrate with React applications
React component props and data → Embedded chart components in React UI
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.