A compact inline chart (line, area, or column) that shows a data trend at a glance inside a KPI card, table row, or dashboard header, with an optional hover tooltip and live-updating value/label.
import { Sparkline, SparklineChart } from "@/components/ui/sparkline";
export default function SparklineColors() {
return (
<div className="flex w-64 max-w-full flex-col gap-5">
<Sparkline
data={[6, 12, 9, 16, 14, 22, 20, 28]}
color="var(--success-emphasis)"
>
<SparklineChart variant="area" aria-label="Revenue" />
</Sparkline>
<Sparkline
data={[28, 22, 25, 16, 19, 12, 14, 8]}
color="var(--error-emphasis)"
>
<SparklineChart variant="area" aria-label="Churn" />
</Sparkline>
<Sparkline
data={[10, 14, 11, 15, 13, 18, 15, 19]}
color="var(--warning-emphasis)"
>
<SparklineChart aria-label="Latency" />
</Sparkline>
<Sparkline data={[8, 16, 12, 22, 18, 26, 24, 32]} color="#a855f7">
<SparklineChart fill aria-label="Engagement" />
</Sparkline>
<Sparkline
data={[5, 11, 8, 14, 10, 18, 13, 21]}
color="var(--info-emphasis)"
>
<SparklineChart variant="column" aria-label="Orders" />
</Sparkline>
</div>
);
}
