liveline-vue

Real-time animated charts for Vue 3 — line, multi-series & candlestick, canvas-rendered, 60fps, zero CSS imports.

A Vue 3 port of liveline by Benji Taylor. All credit for the original design and rendering engine goes to him. liveline (React) is the upstream project — if you use React, use the original: npm i liveline. This package only re-authors the thin React component/hook layer as a Vue SFC + composable; the framework-agnostic core (canvas drawing, math, theming) is preserved verbatim from the original. MIT, original copyright retained.

npm add liveline-vue   # peer dependency: vue >=3.3

Why

• Canvas, 60fps — smooth value interpolation, momentum glow, live badge, pulsing dot. No SVG reflow, no DOM thrash.
• Drop-in — pass a growing { time, value }[] and the latest value; the chart animates between updates.
• Batteries included — multi-series with auto toggle chips, candlesticks, reference lines, time-window buttons, crosshair scrubbing — all built in.
• Tiny & typed — ~27 kB gzipped, full TypeScript types, vue is the only peer dep.

Single series

<script setup lang="ts">
import { ref } from 'vue'
import { Liveline } from 'liveline-vue'
import type { LivelinePoint } from 'liveline-vue'

const data = ref<LivelinePoint[]>([])   // grow from a WS/poll: { time: unixSeconds, value }
const value = ref(0)                     // latest value — smoothly interpolated
</script>

<template>
  <div style="height: 300px">
    <Liveline :data="data" :value="value" color="#16a34a" theme="light" show-value />
  </div>
</template>

The component fills its parent — set a height on the parent.

Multi-series + box crosshair + reference line

The crosshair follows your cursor and reads out every series at that instant — inline, or as a floating box (crosshair-style="box"). Toggle chips appear automatically for 2+ series; click one to isolate. Mark any series dashed (e.g. a bid/secondary line).

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import { Liveline } from 'liveline-vue'
import type { LivelineSeries, WindowOption } from 'liveline-vue'

const series = shallowRef<LivelineSeries[]>([])   // [{ id, data, value, color, label?, dashed? }]
const windowSecs = ref(300)
const windows: WindowOption[] = [
  { label: '1m', secs: 60 },
  { label: '5m', secs: 300 },
  { label: '15m', secs: 900 },
]
</script>

<template>
  <div style="height: 300px">
    <Liveline
      :data="[]"
      :value="0"
      :series="series"
      theme="light"
      crosshair-style="box"
      :window="windowSecs"
      :windows="windows"
      :reference-line="{ value: 80, label: 'SLO 80ms' }"
      :format-value="(v) => `${v.toFixed(0)}ms`"
      @window-change="(s) => (windowSecs = s)"
    />
  </div>
</template>

Threshold colours

Colour the line and fill by a y threshold — green above the limit, red below, split exactly on the limit line (works with the spline + fill). Great for "above target / below target" metrics.

<Liveline
  :data="data" :value="value" fill
  :reference-line="{ value: 1000, label: '1k/s' }"
  :threshold-colors="{ value: 1000, above: '#16a34a', below: '#dc2626' }"
/>

Props

Same surface as the React original. Highlights:

| Prop | Type | Default | Notes | |------|------|---------|-------| | data / value | LivelinePoint[] / number | — | Single-series input | | series | LivelineSeries[] | — | Multi-series; overrides data/value | | theme | 'light' \| 'dark' | 'dark' | | | color | string | '#3b82f6' | Accent; palette derived from it | | background | string | — | Any CSS color — fills behind the chart + matches the edge label-fade | | crosshairStyle | 'inline' \| 'box' | 'inline' | Multi-series readout: inline text or a floating box | | window | number | 30 | Visible window (seconds) | | windows | WindowOption[] | — | Built-in time-range buttons | | referenceLine | { value, label? } | — | Dashed threshold line | | thresholdColors | { value, above, below } | — | Colour the line + fill by a y threshold — above colour above the limit, below below; split exactly on the limit | | series[].dashed | boolean | false | Render a series as a dashed line | | grid · fill · badge · momentum · pulse · scrub | boolean | true | Feature flags | | showValue | boolean | false | Large live value overlay | | exaggerate | boolean | false | Tight Y-axis so small moves fill the height | | mode · candles · candleWidth · liveCandle | — | — | Candlestick mode | | formatValue · formatTime | (n) => string | sensible | Axis / badge formatting |

React callback props map to Vue events: onWindowChange → @window-change, onModeChange → @mode-change, onSeriesToggle → @series-toggle, onHover → @hover. See src/types.ts for the full typed list.

Develop

npm install
npm run dev        # demo playground
npm run typecheck  # vue-tsc
npm run build      # library build (ES + CJS + bundled .d.ts) → dist/

Credits

This is a port. The original — design, the canvas rendering engine, the entire look — is liveline by Benji Taylor (MIT). Please ⭐ the upstream repo. If you're on React, use liveline directly — this package exists only to bring the same charts to Vue 3.

License

MIT — see LICENSE. Original copyright © 2025-2026 Benji Taylor (liveline); Vue port © 2026 liveline-vue contributors. The original MIT notice is retained in full.