Components•Live line
Components•Live line
Live line
A streaming line chart that stays calm. Values glide in on a damped head, the y range never clips a spike and contracts slowly, and the newest value is always labelled.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/live-lineHow to use
import { LiveLine } from "@/components/bjork-ui/charts/live-line";export function Demo({ points }: { points: { t: number; v: number }[] }) { return ( <LiveLine data={points} threshold={{ value: 250, label: "SLO 250ms" }} formatValue={(v) => `${Math.round(v)} ms`} scrub /> );}
SLO 250ms
-1m-30snow