Getting started
Install livecharts and render your first LiveChart
Install
npm install livechartsReact is a peer dependency (react ≥ 18).
Minimal example
The component fills its parent. Set an explicit height on the wrapper.
"use client";
import { LiveChart } from "livecharts/react";
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 },
];
export default function Page() {
return (
<div style={{ height: 280 }}>
<LiveChart data={data} value={104} window={30} />
</div>
);
}Rules of thumb
timeis unix seconds (not milliseconds).- Always pass the latest scalar as
valuealongside the history indata. - In Next.js App Router, mark the file
"use client"— the chart uses refs, canvas, andrequestAnimationFrame. - 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:
"use client";
import { useEffect, useState } from "react";
import { LiveChart } from "livecharts/react";
import { createWalker } from "livecharts/data";
export function LiveFeed() {
const [walker] = useState(() =>
createWalker({ start: 100, damping: 0.95, volatility: 0.015 })
);
const [data, setData] = useState(walker.history);
const [value, setValue] = useState(walker.value);
useEffect(() => {
const id = setInterval(() => {
const next = walker.tick();
setData(next.history);
setValue(next.value);
}, 250);
return () => clearInterval(id);
}, [walker]);
return (
<div style={{ height: 240 }}>
<LiveChart data={data} value={value} window={30} theme="light" />
</div>
);
}LiveCharts interpolates between updates, so even infrequent ticks look smooth.
For a real WebSocket/polling feed, use pushTick instead of hand-rolling trim.
Two props. That's it.
Customize a little
<LiveChart
data={data}
value={value}
theme="light"
color="#ef4444"
formatValue={(v) => `${v.toFixed(0)} bpm`}
exaggerate
badgeVariant="minimal"
grid={false}
momentum={false}
lineWidth={2.5}
/>Resting heart rate. Custom formatter, exaggerated Y-axis.
See Effects for exaggerate, badge variants, and more.