Chartcn

Shadcn KPI Card with Sparkline

A dashboard stat card: the latest value, its change vs. the previous period as a colored badge, and a small sparkline of the trend.

CSV, TSV from Excel/Sheets, a Markdown table, or JSON.

CSV
Sparkline
Code
Revenue61,400
▲ 7.9%
Jan – Jun
Image
chart.tsx
"use client"

import { useId } from "react"
import { Area, AreaChart, XAxis, YAxis } from "recharts"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const data = [
  { Month: "Jan", Revenue: 42000 },
  { Month: "Feb", Revenue: 45800 },
  { Month: "Mar", Revenue: 44100 },
  { Month: "Apr", Revenue: 51200 },
  { Month: "May", Revenue: 56900 },
  { Month: "Jun", Revenue: 61400 },
]

const chartConfig = {
  Revenue: { label: "Revenue", color: "var(--chart-1)" },
} satisfies ChartConfig

export function Chart() {
  const uid = useId().replace(/[^\w-]/g, "")
  const values = data.map((row) => row.Revenue).filter((value): value is number => value !== null)
  const latest = values.at(-1)
  const previous = values.at(-2)
  const delta =
    latest !== undefined && previous !== undefined && previous !== 0
      ? ((latest - previous) / Math.abs(previous)) * 100
      : null

  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex items-start justify-between gap-4">
        <div className="flex flex-col gap-1">
          <span className="text-sm text-muted-foreground">Revenue</span>
          <span className="text-3xl font-semibold tracking-tight tabular-nums">
            {latest?.toLocaleString("en-US", { maximumFractionDigits: 2 }) ?? "–"}
          </span>
        </div>
        {delta !== null && (
          <span
            className={`rounded-full px-2 py-0.5 text-xs font-medium tabular-nums ${
              delta >= 0
                ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
                : "bg-red-500/10 text-red-600 dark:text-red-400"
            }`}
          >
            {delta >= 0 ? "▲" : "▼"} {Math.abs(delta).toFixed(1)}%
          </span>
        )}
      </div>
      <ChartContainer config={chartConfig} className="aspect-auto h-[80px] w-full">
        <AreaChart data={data} margin={{ top: 4, right: 0, bottom: 0, left: 0 }}>
          <defs>
            <linearGradient id={`${uid}-fill-0`} x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="var(--color-Revenue)" stopOpacity={0.5} />
              <stop offset="100%" stopColor="var(--color-Revenue)" stopOpacity={0} />
            </linearGradient>
          </defs>
          <XAxis dataKey="Month" hide />
          <YAxis hide domain={["dataMin", "dataMax"]} />
          <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
          <Area dataKey="Revenue" type="monotone" fill={`url(#${uid}-fill-0)`} fillOpacity={1} stroke="var(--color-Revenue)" strokeWidth={2} />
        </AreaChart>
      </ChartContainer>
      <span className="text-xs text-muted-foreground">
        {String(data[0]?.Month ?? "")} – {String(data[data.length - 1]?.Month ?? "")}
      </span>
    </div>
  )
}

When to use a KPI card

KPI cards summarize one metric at a glance, usually in a row at the top of a dashboard.

  • MRR, revenue, or orders this month
  • Active users with week-over-week change
  • Conversion rate with its recent trend

Data format

  • Use 2 columns: Period,Value, oldest first. The last row is the headline value.
  • The change badge compares the last two non-blank values.
  • Paste CSV, JSON from your API, TSV copied from Excel or Google Sheets, or a Markdown table. The generated component keeps your column names as its data keys.
CSV
Month,Revenue
Jan,42000
Feb,45800
Mar,44100
Apr,51200
May,56900
Jun,61400
Same data as JSON
[
  {"month": "Jan", "revenue": 42000},
  {"month": "Feb", "revenue": 45800},
  {"month": "Mar", "revenue": 44100},
  …
]

Options

Sparkline
Area, line, or bar sparkline.
Color
Custom sparkline color.

How to add it to your project

  1. 1. Add the shadcn/ui chart component (it installs Recharts):
    npx shadcn@latest add chart
  2. 2. Paste your data above, pick the options, and copy the generated chart.tsx.
  3. 3. Save it in your project (e.g. components/kpi-chart.tsx) and render <Chart />, or <Chart data={rows} /> in Data as prop mode.

KPI Sparkline Card FAQ