LiveChart
Complete Vue props and events reference for livecharts/vue
import { LiveChart } from "livecharts/vue";
import type { LiveChartEmits, LiveChartProps } from "livecharts/vue";
The component fills its parent. Set a height on the wrapper.
Props mirror livecharts/react. Vue-specific notes below.
| React | Vue |
|---|
className | class |
style (CSSProperties) | style (StyleValue) |
onWindowChange prop | @window-change only |
onModeChange prop | @mode-change only |
onSeriesToggle prop | @series-toggle only |
onHover prop | @hover only |
| Event | Payload | Description |
|---|
windowChange | secs: number | Horizon button selected |
modeChange | "line" | "candle" | Mode toggle clicked |
seriesToggle | id: string, visible: boolean | Series chip toggled |
hover | HoverPoint | null | Scrub callback |
<LiveChart
:data="data"
:value="value"
:windows="windows"
@window-change="horizon = $event"
@mode-change="mode = $event"
/>
Mode chrome appears when you listen for @mode-change.
Needs a browser canvas — wrap in ClientOnly (Nuxt) or equivalent when using SSR. See Getting started.
| Prop | Type | Default | Description |
|---|
data | LiveChartPoint[] | required | History points { time, value } (unix seconds) |
value | number | required | Latest scalar reading |
series | LiveChartSeries[] | — | Multi-series; overrides data / value / color |
| Prop | Type | Default | Description |
|---|
theme | "light" | "dark" | "dark" | Surface / chrome mode |
color | string | "#3b82f6" | Accent CSS color |
grid | boolean | true | Value grid + labels |
badge | boolean | true | Live value badge at the tip |
badgeVariant | "default" | "minimal" | "default" | Accent pill vs quiet pill |
badgeTail | boolean | true | Badge pointer toward the tip |
fill | boolean | true | Under-line gradient |
pulse | boolean | true | Tip glow pulse |
lineWidth | number | 2 | Stroke width (px) |
| Prop | Type | Default | Description |
|---|
momentum | boolean | Momentum | true | Auto arrows, forced direction, or off |
scrub | boolean | true | Crosshair + tooltips on hover |
exaggerate | boolean | false | Tighten Y-range for small moves |
showValue | boolean | false | Large DOM value overlay |
valueMomentumColor | boolean | false | Tint overlay by momentum |
degen | boolean | DegenOptions | false | Particles + shake on swings |
| Prop | Type | Default | Description |
|---|
loading | boolean | false | Breathing placeholder |
paused | boolean | false | Freeze scroll |
emptyText | string | "No data to display" | Empty-state copy |
pauseWhenOffscreen | boolean | true | Stop rAF while offscreen |
| Prop | Type | Default | Description |
|---|
window | number | 30 | Visible horizon (seconds) |
windows | WindowOption[] | — | Horizon button bar |
windowStyle | "default" | "rounded" | "text" | "default" | Button bar style |
Named slots replace built-in toolbar pieces. See Chrome slots.
| Slot | Scope |
|---|
#windows | windows, activeSecs, setWindow, theme |
#mode-toggle | mode, setMode, theme |
#series-toggle | series, toggle, theme |
| Prop | Type | Default | Description |
|---|
mode | "line" | "candle" | "line" | Active view + morph |
candles | CandlePoint[] | — | Closed OHLC candles |
liveCandle | CandlePoint | — | Forming candle |
candleWidth | number | — | Bucket width (seconds) |
lineMode | boolean | — | Deprecated — prefer mode |
| Prop | Type | Default | Description |
|---|
a11y | boolean | true | Focusable plot + keyboard scrub + live region |
ariaLabel | string | "Live chart" | Accessible name (aria-label) |
See Accessibility.
| Prop | Type | Default | Description |
|---|
orderbook | OrderbookData | — | Streaming bid/ask labels |
referenceLine | ReferenceLine | — | Horizontal threshold |
formatValue | (v: number) => string | v.toFixed(2) | Badge / tooltips |
formatTime | (t: number) => string | HH:MM:SS | Crosshair time |
lerpSpeed | number | 0.08 | Display lerp rate |
padding | Padding | — | Chart insets |
class | string | — | Canvas container class |
style | StyleValue | — | Canvas container style |
Related: Demo · Guides · LiveChartTransition · useLiveChartEngine · React API (shared engine behavior)