Spark Area Chart

A compact, decorative sparkline for stat cards and dense lists — no axes, no legend, no tooltip. Fills its parent, so size it with the container (e.g. h-10 w-28). Powered by Recharts, inspired by Tremor.

In Stat Cards

The intended habitat: a small trend hint next to a KPI value.

Revenue

$164k

+12.4% vs. last year

Churn

3.1%

-0.8 pp vs. last year

Active users

8.9k

stable

Line Only

showGradient={false} drops the soft fill under the line; strokeWidth tunes its weight. Hex colors are accepted alongside palette names.

SparkAreaChart

A compact decorative sparkline (no axes, legend, or tooltip) for stat cards and dense lists. Renders a soft gradient under the line by default and fills its parent container. With fewer than two data points it renders a muted placeholder block instead of an empty chart.

Usage

import { SparkAreaChart } from "@/components/charts/spark-area-chart"

// Size via the container — the chart fills it
<div className="h-10 w-28">
  <SparkAreaChart
    data={history}
    index="month"
    categories={["value"]}
    colors={["emerald"]}
  />
</div>

// Line only, custom hex color
<SparkAreaChart
  data={history}
  index="month"
  categories={["value"]}
  colors={["#8b5cf6"]}
  showGradient={false}
  strokeWidth={1.5}
/>

Props

Prop	Type	Default	Description
data*	Record<string, unknown>[]	—	Array of data objects. Non-numeric values are ignored when computing the Y domain.
index*	string	—	Key of the X-axis field. Kept for API symmetry with the other charts; the axis itself is never rendered.
categories*	string[]	—	Keys from the data objects to render as series.
colors	(ChartColor \| string)[]	["emerald"]	One palette name or hex color per category, in order.
showGradient	boolean	true	Soft gradient fill under each line.
strokeWidth	number	2	Line thickness in pixels.
className	string	—	Additional classes on the wrapper. The chart fills its parent — size the parent (or pass h-/w- here).