Sparkline
Tiny axis-free trend line rendered in SVG — colored via currentColor so it themes like any text element
Sparkline draws a miniature trend from a plain number array — no axes, no legend, no tooltip, no chart library. The stroke is currentColor, so sizing and color are plain Tailwind classes (className="h-8 w-32 text-primary"), and the line follows theme changes like any text element.
Part of the chart family: it shares the chart-kit math layer with Chart, Donut and Radar — reach for Chart when you need axes, tooltips or large time series. Each member installs independently.
Installation
Usage
Basic Usage
"use client";
import { Sparkline } from "@/ui";
const trend = [12, 18, 15, 22, 19, 26, 24, 31, 28, 35, 33, 40];
const dip = [30, 28, 29, 24, 22, 25, 21, 18, 20, 16];
const flat = [20, 20, 20, 20, 20, 20];
export default function SparklineBasicDemo() {
return (
<div className="grid grid-cols-3 gap-6">
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">line</span>
<Sparkline data={trend} className="h-10 w-full text-primary" />
</div>
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">area</span>
<Sparkline data={trend} variant="area" smooth className="h-10 w-full text-primary" />
</div>
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">bar</span>
<Sparkline data={dip} variant="bar" className="h-10 w-full text-danger" />
</div>
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">flat</span>
<Sparkline data={flat} className="h-10 w-full text-muted-foreground" />
</div>
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">success</span>
<Sparkline data={trend} variant="area" smooth className="h-10 w-full text-success" />
</div>
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">warning</span>
<Sparkline data={dip} variant="bar" className="h-10 w-full text-warning" />
</div>
</div>
);
}
variant picks the shape: "line" (default), "area" (adds a translucent fill down to the baseline) or "bar" (a column per value). smooth switches the line to monotone-cubic interpolation, which never overshoots the data. A flat dataset renders as a centered horizontal line.
API Reference
Sparkline
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | - | Raw values, mapped left to right |
variant | "line" | "area" | "bar" | "line" | Shape of the sparkline |
smooth | boolean | false | Monotone-cubic smoothing for line and area |
className | ClassNameValue | - | Size and color classes, e.g. h-8 w-32 text-primary |
...props | React.ComponentProps<"svg"> | - | Spread onto the root svg element |
Behavior Notes
- Coloring: everything draws with
currentColor— settext-primary,text-danger,text-successetc. onclassName; no color props exist. - Sizing: defaults to
h-8 w-32; override withclassName. The viewBox stretches non-uniformly while strokes stay crisp viavector-effect: non-scaling-stroke. - Clamping: values map to the observed min/max of the data, so any dataset fills the full height.