Sparkline

Component 4

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";

const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];

export default function SparklineColumn() {
  return (
    <div className="flex w-64 max-w-full flex-col gap-6">
      <Sparkline data={[4, 9, 6, 12, 8, 15, 11, 18]} labels={DAYS}>
        <SparklineChart
          variant="column"
          height={56}
          tooltip
          aria-label="Daily visits"
        />
      </Sparkline>
      <Sparkline data={[6, -7, 9, -4, 8, -9, 5, -6]} labels={DAYS}>
        <SparklineChart
          variant="column"
          height={56}
          tooltip
          aria-label="Net change per day"
        />
      </Sparkline>
    </div>
  );
}