Getting started
Install livecharts/vue and render your first chart
Install
npm install livechartsVue is a peer dependency (vue ≥ 3.4).
Minimal example
The component fills its parent. Set an explicit height on the wrapper.
<script setup lang="ts">
import { LiveChart } from "livecharts/vue";
const now = Date.now() / 1000;
const data = [
{ time: now - 30, value: 100 },
{ time: now - 20, value: 102 },
{ time: now - 10, value: 101 },
{ time: now, value: 104 },
];
</script>
<template>
<div style="height: 280px">
<LiveChart :data="data" :value="104" :window="30" />
</div>
</template>Rules of thumb
timeis unix seconds (not milliseconds).- Always pass the latest scalar as
valuealongside the history indata. - Under SSR (Nuxt), wrap in
ClientOnly— the chart needscanvasandrequestAnimationFrame. - Give the parent a height (or absolute positioning with inset). Zero-height parents render nothing useful.
Live feed (quick sketch)
Feed updates however you like — WebSocket, polling, or a demo walker:
<script setup lang="ts">
import { LiveChart } from "livecharts/vue";
import { createWalker } from "livecharts/data";
import { onMounted, onUnmounted, ref } from "vue";
const walker = createWalker({
start: 100,
damping: 0.95,
volatility: 0.015,
});
const data = ref(walker.history);
const value = ref(walker.value);
let timer: ReturnType<typeof setInterval> | undefined;
onMounted(() => {
timer = setInterval(() => {
const next = walker.tick();
data.value = next.history;
value.value = next.value;
}, 250);
});
onUnmounted(() => {
if (timer) clearInterval(timer);
});
</script>
<template>
<div style="height: 240px">
<LiveChart :data="data" :value="value" :window="30" theme="light" />
</div>
</template>LiveCharts interpolates between updates, so even infrequent ticks look smooth.
For a real WebSocket/polling feed, use pushTick instead of hand-rolling trim.
Live preview uses the shared engine via React bindings; copy the Vue snippet above.
Two props. That's it.
Customize a little
<LiveChart
:data="data"
:value="value"
theme="light"
color="#ef4444"
:format-value="(v) => `${v.toFixed(0)} bpm`"
exaggerate
badge-variant="minimal"
:grid="false"
:momentum="false"
:line-width="2.5"
/>Resting heart rate. Custom formatter, exaggerated Y-axis.
See Effects for exaggerate, badge variants, and more.
SSR / Nuxt
LiveChart needs a browser canvas. In Nuxt, wrap it in ClientOnly (or dynamic-import with ssr: false):
<template>
<ClientOnly>
<div style="height: 220px">
<LiveChart :data="data" :value="value" />
</div>
</ClientOnly>
</template>Props overview
| Prop | Notes |
|---|---|
data / value | Required for single-series |
series | Multi-series; overrides data / value / color |
theme | "light" | "dark" (default "dark") |
window | Horizon in seconds (default 30) |
windows | Pill buttons; listen with @window-change |
mode | Line ↔ candle; chrome when you listen @mode-change |
class / style | Vue-native (not className) |
Callbacks are events only (@window-change, @mode-change, @series-toggle, @hover) — not React-style on* props.
Full tables: LiveChart API.