# Liveline draws live data on a canvas with no CSS to import

> Liveline is a React chart component for data that arrives continuously, and it renders on a canvas at 60fps with zero CSS imports, in line, candlestick and multi-series modes. The data contract is simple, a growing array of points plus the latest value, and everything else is a prop with a default, which is both its strength and its cost.

**benjitaylor/liveline** — Real-time animated line chart for React.

- Repository: https://github.com/benjitaylor/liveline
- Website: https://benji.org/liveline
- Stars: 972 · Forks: 75
- Language: TypeScript
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/benjitaylor-liveline

## Canvas, sixty frames, no stylesheet

The one line summary in the README is the whole pitch. Real-time animated charts for React, in line, multi-series and candlestick modes, canvas-rendered, at 60fps, with zero CSS imports. The canvas decision is what makes the rest work. A chart that redraws every frame with a scrolling window is a workload where the DOM is the wrong tool, and rendering into a canvas sidesteps the reconciliation cost entirely. The zero CSS imports claim follows from that, since there is no DOM to style, and it removes the most common integration problem with a chart library, which is a stylesheet that fights with the host application. The package is installed with pnpm add liveline, and it declares a peer dependency of React 18 or newer, so it does not bring its own copy of React into your tree.

## The data contract is an array and a number

The component API is deliberately small at the point where it matters. You pass data as a growing array of points and value as the latest number, and the component handles smooth interpolation between updates. Each point is a time in unix seconds and a value, and the type is exported so you can type your own state. The quick start is a component with two pieces of state:

```tsx
import { Liveline } from 'liveline'
import type { LivelinePoint } from 'liveline'

function Chart() {
  const [data, setData] = useState<LivelinePoint[]>([])
  const [value, setValue] = useState(0)
```

and then the component itself, which is given the data, the value, an accent colour and a theme:

```tsx
  return (
    <div style={{ height: 300 }}>
      <Liveline data={data} value={value} color="#3b82f6" theme="dark" />
    </div>
  )
}
```

The comment in the example says where the data comes from, whether that is a WebSocket or polling, and the wrapper div shows the one layout rule, that the component fills its parent container, so you set a height on the parent and let the component take the width.

## Most of the prop surface is appearance, and almost all of it has a default

The prop tables are long, and the interesting structure is that almost every entry has a sensible default, which means a minimal usage is a two prop component and everything else is opt-out. The appearance group is the clearest example. The theme is light or dark and defaults to dark. The color is the accent colour and defaults to a blue, and the documentation notes that all palette colours are derived from it, so one prop restyles the whole chart. The grid toggle adds Y-axis grid lines and labels and is on by default, the badge draws a value pill that tracks the chart tip and is on by default, and badgeVariant switches that pill between an accent-coloured style and a minimal white one with grey text. There is a badgeTail for a pointed tail on the pill, a fill toggle for the gradient under the curve, a pulse toggle for the pulsing ring on the live dot, and lineWidth for the stroke width of the main line in pixels, defaulting to 2. The practical reading is that the defaults are a complete, opinionated design and the props exist to remove parts of it.

## Momentum, scrubbing and the live value

The features group is where the component does the things a price chart does. The momentum prop controls a dot glow and arrows, and it accepts true, which auto-detects, or a string of up, down or flat. The scrub prop gives crosshair scrubbing on hover. The exaggerate prop tightens the Y-axis so that small moves fill the chart height, which is the difference between a chart that shows a real trend and one that shows a flat line with noise. The showValue prop is the one that matters for a dashboard, a large live value overlay that is documented as a 60fps DOM update with no re-renders, so the number keeps moving without React reconciling the tree. The valueMomentumColor prop colours that value text green or red by momentum, and the degen prop, which takes a boolean or an options object, adds burst particles and a chart shake on momentum swings. That last one is decoration, and it is the kind of prop that tells you what kind of project this component came out of.

## Candlesticks, and a morph between the two views

The candlestick mode has its own prop set. The mode prop selects line or candle, the candles prop takes the committed OHLC bars, and the liveCandle prop is the current in-progress bar, updated every tick. The candleWidth sets the time bucket in seconds, so the component decides which ticks belong to which bar. The interesting part is the lineMode prop, which smoothly morphs between the candle and line views, with the candle bodies collapsing to the close price and then the line extending outward, and the documentation asks for lineData and lineValue at tick level resolution so the density transition during the morph is smooth rather than a jump from one resolution to the other. The onModeChange prop renders a built-in toggle for switching between the two, next to the time window buttons. So a single component covers the two chart types a trading interface needs, including the animation between them, which is the kind of detail that is normally several hundred lines of your own code.

## Multiple series, an orderbook and the state props

The series prop draws several lines over shared axes, with each series carrying its own id, data, value, colour and optional label. Toggle chips appear automatically when there are two or more series, clicking one hides or shows that line with a smooth fade, and the Y-axis range adjusts when a series is hidden. Two limitations are stated plainly, with the badge, the momentum arrows and the fill all disabled in multi-series mode, which is a sensible trade since one badge cannot represent several values. The orderbook prop takes a bid and ask depth stream, which is a specialised chart type for market data. The state group covers the lifecycle. The loading prop draws a breathing line animation for when you are waiting for the first data, and when loading flips to false with data present the loading line morphs into the real chart, with the fill, grid and badge animating in for a line chart and flat lines expanding into full OHLC bodies in candle mode. The paused prop freezes the scrolling smoothly and resumes by catching up to real time, and emptyText sets the text of the empty state, which defaults to No data to display.

## A young package with a careful build

The packaging is more polished than the version number suggests. The package is published as an ES module with a CommonJS build alongside it and separate type declarations for both, the exports map is written out by hand, and the files list contains only the dist directory, the README and the licence, so nothing else leaks into a consumer's node_modules. It is marked sideEffects false, which lets a bundler drop it entirely when it is unused, the engines field requires Node 18 or newer, and React 18 or newer is a peer dependency rather than a direct one. The build is tsup, with a watch mode, the tests run under vitest, and there is a separate typecheck script that runs tsc with no emit. The project also ships a dev/ directory for local work, a CONTRIBUTING.md and a tsconfig. The version in the package file is 0.0.7, the licence is MIT, the homepage points at the project site, and the repository is not archived with the last push on 2026-06-07 and no GitHub releases published, so there is no changelog beyond the commit history to rely on.

## Conclusion

Liveline fits a product team that already has a stream of points and wants a chart that looks finished without pulling in a charting library and its CSS, since the component ships as a single package with no stylesheet to configure. It does not fit a project that needs axes with a fixed time domain rather than a scrolling window, and it does not fit a team that wants a stable API, because the version is 0.0.7 with no GitHub releases published and the prop list is still moving. Before you adopt it, read the prop tables in the documentation carefully, because several features disable each other, with the badge, momentum arrows and fill turned off in multi-series mode, and note the release state, where the last push was on 2026-06-07 and the package metadata still reads 0.0.7.

## FAQ

### What is Liveline?

It is a React chart component for data that arrives continuously, rendered on a canvas at 60fps with zero CSS imports, supporting line, candlestick and multi-series modes, and it takes a growing array of points plus the latest value with interpolation between updates.

### How do I install and use Liveline?

Run pnpm add liveline, then render the Liveline component with data, value, color and theme inside a parent div that has a height set, because the component fills its parent container. React 18 or newer is a peer dependency.

### Can Liveline draw candlestick charts?

Yes. Set mode to candle and pass the committed OHLC bars as candles plus the current bar as liveCandle, with candleWidth setting the time bucket in seconds. The lineMode prop morphs smoothly between the candle and line views, and onModeChange renders a built-in toggle.

### Does Liveline support multiple lines on one chart?

Yes, through the series prop, with each series carrying its own id, data, value, colour and label. Toggle chips appear when there are two or more series, and the Y-axis adjusts when one is hidden, but the badge, momentum arrows and fill are disabled in multi-series mode.

### Is Liveline still being developed?

The repository is not archived and the last push was on 2026-06-07, but the package version is 0.0.7 and no GitHub releases are published, so the prop surface is still moving. The licence is MIT.

## Sources

- [benjitaylor/liveline on GitHub](https://github.com/benjitaylor/liveline)
- [Issues](https://github.com/benjitaylor/liveline/issues)
- [License: MIT](https://github.com/benjitaylor/liveline/blob/main/LICENSE)
- [Project website](https://benji.org/liveline)
- [README](https://github.com/benjitaylor/liveline/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/benjitaylor-liveline