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

• 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.

<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.

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>

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' }"
/>

Same surface as the React original. Highlights:

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.

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

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.

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