Realtime streamPro
A live line that scrolls at 60fps as readings arrive, holds still on hover to read, and pops a marker on every anomaly.
Live · keyboard ready
Checkout API
Waiting for data
- Live monitoring panels and status pages.
- A hero on an infrastructure or observability page where motion shows the system is alive.
- Use line-chart for static time series.
- Use brush-chart for long histories people zoom into.
- Use sparkline for a tiny trend inside a stat.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { RealtimeStream, type StreamPoint } from "@/registry/components/realtime-stream/realtime-stream"; export function Latency({ socket }: { socket: WebSocket }) { const [points, setPoints] = useState<StreamPoint[]>([]); useEffect(() => { const onMessage = (event: MessageEvent) => { const { t, p95 } = JSON.parse(event.data); setPoints(list => [...list.slice(-200), { t, value: p95, anomaly: p95 > 300 ? "Spike" : undefined }]); }; socket.addEventListener("message", onMessage); return () => socket.removeEventListener("message", onMessage); }, [socket]); return <RealtimeStream points={points} label="p95 latency" unit="ms" interval={500} />;}RealtimeStream
A live line chart on a canvas that scrolls continuously at the display rate. It draws one interval behind the newest reading so each point slides in, eases its value axis, pops a marker for anomalies, and holds still on hover so a point can be read while new ones queue.
PropTypeDefaultDescription
pointsRequiredStreamPoint[]–Append-only feed in ascending time: { t, value, anomaly? }. A string anomaly becomes the marker tag.labelRequiredstring–What is measured. Names the chart, the current value, and the table.unitstring""Unit after values, such as "ms".windowMsnumber30000Visible span of time.intervalnumber1000Typical time between points. The view trails the newest point by this much.heightnumber200Plot height in pixels.formatValue(value: number) => string–Formats values in the readout, tooltip, and table.formatTime(t: number) => stringHH:MM:SSFormats times in the tooltip and table.pausedboolean–Controlled pause.defaultPausedbooleanfalseInitial pause when uncontrolled.onPausedChange(paused: boolean) => void–Called when the status button or Space toggles the pause.pauseOnHoverbooleantrueHolds the view while the pointer is over the plot.minnumber–Fixed bottom of the value axis. Leave it out to follow the data.maxnumber–Fixed top of the value axis.emptyLabelstring"Waiting for data"Shown before the first point.refRef<HTMLElement>–Forwarded to the figure.classNamestring–Extra class on the figure.- Tab
- Focuses the plot, holds the view, and reads the newest visible point.
- ArrowLeftorArrowRight
- Previous or next point.
- PageUporPageDown
- Ten points back or forward.
- HomeorEnd
- Oldest or newest visible point.
- SpaceorEnter
- Pauses or resumes the stream.
- Escape
- Clears the reading and resumes.
- The current value is text with an accessible name; the rolling digits are aria-hidden.
- The status button is a toggle with aria-pressed and shows live or paused with a shape and a label, never colour alone.
- Anomalies are announced once in a polite live region as they arrive; point readings are announced as the keyboard moves.
- A visually hidden table lists the latest twenty readings with their notes.
- The line scrolls continuously at the display rate; the head interpolates between readings, so new points slide in rather than pop.
- The value axis eases toward the visible range, so gridlines slide instead of jumping.
- Anomaly markers and tags pop in with one overshoot as the head reaches them.
- Resuming glides from the held view back to live.
- Reduced motion stops the scroll: the chart redraws only when a reading arrives, without interpolation or pops.
- The canvas fills its container at the device pixel ratio and redraws on resize.
- Time labels thin out as the plot narrows.
- Touch reads points with a press and drag, which also holds the view.
- One canvas, one requestAnimationFrame loop, stopped off screen and in hidden tabs.
- Only points inside the window are drawn, found by binary search.
- Theme tokens are resolved from hidden probes a few times a second, not every frame.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose it for one live measure where the last seconds or minutes matter: latency, throughput, queue depth, active users.
- Set interval to the feed's cadence and windowMs to a few dozen points; trim the array to a few windows.
- Flag anomalies on the data itself with a short tag; the chart does not detect them.
- For history or several series, use line-chart or brush-chart instead.
The full library index for assistants is at /llms.txt.