Tiny inline chart on recharts in line, area or bar form with optional curve, last-point dot, reference line and hover tooltip. Tints with currentColor.
'use client';
import {
Sparkline,
SparklineArea,
SparklineBars,
SparklineDot,
SparklineLine,
SparklineReference,
SparklineTooltip,
} from '@/components/ui/sparkline';
const VISITS = [42, 48, 45, 61, 58, 72, 69, 84, 91, 87, 96, 104];
const LATENCY = [212, 198, 205, 231, 187, 176, 190, 182, 171, 168, 174, 160];
const SIGNUPS = [5, 9, 7, 12, 8, 14, 11, 17, 13, 19, 22, 18];
const ERRORS = [0.4, 0.3, 0.5, 0.9, 1.4, 1.1, 0.8, 0.6, 0.5, 0.7, 0.4, 0.3];
const REVENUE = [4200, 4380, 4100, 4650, 4720, 4390, 5010, 5240, 4980, 5320, 5410, 5670];
export default function SparklineDemo() {
const tiles = [
{
label: 'Visits',
value: '104k',
delta: '+8.3%',
chart: <Sparkline data={VISITS} curve className="h-8 w-28" />,
},
{
label: 'p95 latency',
value: '160 ms',
delta: '-5.1%',
chart: <Sparkline data={LATENCY} variant="area" tone="success" curve className="h-8 w-28" />,
},
{
label: 'Signups',
value: '18',
delta: '+2',
chart: <Sparkline data={SIGNUPS} variant="bar" tone="muted" className="h-8 w-28" />,
},
];
return (
<div className="grid w-full max-w-3xl gap-8">
<div className="grid gap-2">
<p className="text-xs text-muted-foreground uppercase">Stat tiles</p>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
{tiles.map((tile) => (
<div
key={tile.label}
className="flex items-end justify-between gap-3 rounded-md border border-border bg-card p-4 text-card-foreground"
>
<div className="grid gap-1">
<p className="text-xs text-muted-foreground uppercase">{tile.label}</p>
<p className="text-2xl font-semibold tracking-[-0.03em]">{tile.value}</p>
<p className="text-xs text-muted-foreground tabular-nums">{tile.delta}</p>
</div>
{tile.chart}
</div>
))}
</div>
</div>
<div className="grid gap-2">
<p className="text-xs text-muted-foreground uppercase">Hover for values</p>
<div className="flex flex-wrap items-center gap-6 rounded-md border border-border bg-card p-4">
<div className="grid gap-1">
<p className="text-xs text-muted-foreground">Error rate, last 12 h</p>
<Sparkline data={ERRORS} tone="destructive" curve className="h-10 w-48">
<SparklineArea />
<SparklineLine />
<SparklineDot />
<SparklineTooltip format={(v) => `${v.toFixed(1)}%`} />
</Sparkline>
</div>
<div className="grid gap-1">
<p className="text-xs text-muted-foreground">Requests per minute</p>
<Sparkline data={VISITS} variant="bar" className="h-10 w-48">
<SparklineBars />
<SparklineTooltip>{(v, i) => `${v} req, minute ${i + 1}`}</SparklineTooltip>
</Sparkline>
</div>
</div>
</div>
<div className="grid gap-2">
<p className="text-xs text-muted-foreground uppercase">Custom compose</p>
<div className="flex items-center justify-between gap-4 rounded-md border border-border bg-card p-4 text-card-foreground">
<div className="grid gap-1">
<p className="text-sm font-medium">Daily revenue</p>
<p className="text-xs text-muted-foreground">Dashed line is the $5,000 target</p>
</div>
<Sparkline
data={REVENUE}
min={3500}
max={6000}
inset={4}
className="h-12 w-56"
label={'Daily revenue for the last 12 days'}
>
<SparklineReference value={5000} />
<SparklineArea fillOpacity={0.1} />
<SparklineLine strokeWidth={2} />
<SparklineDot r={3} />
<SparklineTooltip format={(v) => `$${v.toLocaleString()}`} />
</Sparkline>
</div>
</div>
</div>
);
}
Part of Hirael — browse the full library on 21st.dev.