Sparkline

Dashboards 2

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sparkline to your project and fits it to your theme.

Code

How Sparkline is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}