Sparkline
Mini SVG line/area chart.
Source
"use client"
import { Sparkline } from "@/registry/warren/sparkline/sparkline"
/** 24-sample run-time history (ms) — same deterministic pipeline as the ledger trace. */
const RUN_TIMES = [
25, 16.8, 47.4, 32.2, 38.1, 15.8, 15.3, 12.5, 39.9, 22.4, 30.4, 34.3,
39.5, 16.4, 41.6, 19.1, 12.3, 34.9, 33.8, 35.9, 18.4, 40.8, 13.3, 47,
]
export default function SparklineDemo() {
return (
<>
<div className="flex flex-col gap-2 border-2 border-border bg-panel p-2">
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
RUN-TIME · 24 SAMPLES
</span>
<Sparkline data={RUN_TIMES} stroke="success" />
</div>
<div className="flex flex-col gap-2 border-2 border-border bg-panel p-2">
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
RAW TRACE · DANGER
</span>
<Sparkline data={RUN_TIMES} stroke="danger" />
</div>
<div className="flex flex-col gap-2 border-2 border-border bg-panel p-2">
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
LATEST MARKED · PRIMARY
</span>
<Sparkline data={RUN_TIMES} stroke="primary" dot />
</div>
<div className="flex flex-col gap-2 border-2 border-border bg-panel p-2">
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
WIDE TRACE · ACCENT
</span>
<Sparkline data={RUN_TIMES} stroke="accent" width={168} height={48} strokeWidth={3} />
</div>
</>
)
}
Installation
npx shadcn@latest add https://warren.eduard3v.com/r/sparkline.jsonUsage
import { Sparkline } from "@/registry/warren/sparkline/sparkline"<Sparkline data={[12, 18, 14, 22, 19, 27, 24]} stroke="success" />Variants
line (default) · bars. The line trace is a raw 2px stroke with no axes and no gridlines —
dot marks the latest sample, and strokeWidth sets the trace weight. The bars variant renders
one thin rect per sample, height proportional to value (min 1px) and color graded by recency: the
oldest fades toward the --primary-pale token, the newest is full tone.
Source
"use client"
import { Sparkline } from "@/registry/warren/sparkline/sparkline"
/** 24-tick TICKS/S walk (120–165 clamp) — same deterministic pipeline as the top bar. */
const TICKS_PER_S = [
133, 134, 139, 136, 132, 136, 139, 137, 136, 135, 138, 140, 138, 142, 143, 144, 143, 144, 142, 143,
140, 135, 138, 138,
]
export default function SparklineBars() {
return (
<>
<div className="flex flex-col gap-2 border-2 border-border bg-panel p-2">
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
TICKS/S · 24 TICKS
</span>
<Sparkline data={TICKS_PER_S} variant="bars" stroke="primary" width={168} height={40} />
</div>
<div className="flex flex-col gap-2 border-2 border-border bg-panel p-2">
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
RECENCY GRADED · TEAL
</span>
<Sparkline data={TICKS_PER_S} variant="bars" stroke="teal" width={168} height={40} />
</div>
</>
)
}
points()
The exported points(data, width, height) helper maps the data series to [x, y] coordinates
inside the width × height viewBox (with 4px vertical padding). Data is normalized to its
min/max so the trace fills the available height; all-equal series render a flat line at mid-height,
and an empty array returns []. It is a pure function — use it to render custom sparkline overlays
or annotations without going through the <Sparkline> component.
API Reference
Prop
Type