Liveline

Liveline is a React component designed for rendering real-time animated line charts with smooth interpolation at 60fps, using only a <canvas> element and no dependencies beyond React 18. It is built to be lightweight and flexible, focusing solely on drawing a line that moves smoothly as new data arrives, with optional features like momentum arrows, value overlays, time windows, reference lines, orderbooks, candlesticks, and multi-series support.

The component is easy to integrate: install via npm install liveline, then include it in your React app by providing data (an array of { time, value } points) and value (the latest number). It automatically fills its parent container, so set a height on the wrapper. Liveline interpolates between data updates, making even infrequent data look smooth.

Additional features include:

• Momentum arrows indicating data direction.
• Value overlay displaying the current value with momentum coloring.
• Time windows for quick view adjustments.
• Reference lines for thresholds or predictions.
• Orderbook visualization for streaming bid/ask data.
• Candlestick charts with toggle between line and candlestick views.
• Multi-series support for overlaying multiple data lines.
• States for loading, pausing, and empty data.
• Theming with customizable colors.
• Extra features like exaggeration, scrubbing, particles, and badges.

It operates on a single <canvas> with a requestAnimationFrame loop, smoothly lerping towards new data points, and adjusting axes and visual elements dynamically. The component’s props allow extensive customization, making it suitable for dashboards, financial charts, health metrics, or any real-time data visualization needs.