Block · dynamic

Live Metric Stream

A real-time line that scrolls continuously and ticks in a fresh reading on an interval, with a pulsing live dot. Pauses off-screen and freezes to a clean static frame under reduced-motion.

State

Size

Mode

MRR

4,514,547 USD

paused · 48-reading window

Live · 4,514,547 USD now, +4.0% vs the 48-reading average (4,342,970 USD).

MRR — most recent readings
Reading	Value (USD)
t−11	4,423,976
t−10	4,440,267
t−9	4,462,786
t−8	4,463,380
t−7	4,451,363
t−6	4,470,849
t−5	4,494,771
t−4	4,507,927
t−3	4,510,344
t−2	4,495,190
t−1	4,508,589
t−0	4,514,547

Source: billing system · updated every 90 seconds

Demo data is illustrative. Replace with your own typed data prop.

Use it with your data

Data contract

Passed via the data prop — an object: validated at runtime, so a bad shape degrades to the error state rather than crashing.

Field	Type	Required
points	array	yes
label	string	no
unit	string	no
intervalMs	number	no

Static props

import { ChartLiveStream } from "@/components/blocks/chart-live-stream/chart-live-stream";

<ChartLiveStream data={myData} />

Client fetch (SWR)

const { data, isLoading, error } = useSWR("/api/metric", fetcher);
// route isLoading/error through <ChartStates>, then:
<ChartLiveStream data={data} />

Server component (RSC)

const data = await fetch(url, {
  next: { revalidate: 3600 },
}).then((r) => r.json());

<ChartLiveStream data={data} />

Map arbitrary rows

import { mapRows } from "@/lib/sextant/column-map";

const out = mapRows(rows, { /* contractKey: "yourColumn" */ }, dataSchema);
if (out.ok) <ChartLiveStream data={out.data} />;

Make it yours

Every customization below is an optional prop — omit them all and you get the defaults shown above. Recolor, reformat, restyle, or drop the card chrome without forking the component.

Recolor or rename a series (line)

<ChartLiveStream
  series={{ line: { color: "var(--chart-3)", label: "…" } }}
/>

Format numbers (currency / locale)

const eur = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR",
  notation: "compact",
});

<ChartLiveStream valueFormatter={(n) => eur.format(n)} />

Replace or hide the narrative

<ChartLiveStream narrative="Your own one-liner." />

// …or hide it entirely:
<ChartLiveStream narrative={false} />

Restyle any region

<ChartLiveStream
  className="max-w-xl"
  classNames={{ body: "bg-muted/20" }}
/>

Drop the card chrome (headless plot)

import { ChartLiveStreamPlot } from "@/components/blocks/chart-live-stream/chart-live-stream";

// Just the chart body — bring your own card/layout:
<ChartLiveStreamPlot data={data} config={config} />