Stat cards — Figure with bar chart

A figure and comparison sit above six bottom-aligned monthly bars, followed by a chart note. Use it when the shape of a recent trend matters alongside its current value.

ReactHTML

1440 × 480

Open in new tab

Component.tsx24 lines

export default function StatCardBarChart() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 sm:w-80">
      <dl>
        <dt className="flex items-center justify-between gap-3 text-sm font-medium text-neutral-500"><span>Metric label</span><span className="text-xs font-normal">Jun</span></dt>
        <dd className="mt-3 text-3xl font-semibold tracking-tight tabular-nums">48,290</dd>
      </dl>
      <p className="mt-2 flex items-center gap-1 text-xs text-neutral-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3 shrink-0"><path d="m7 10 5-5 5 5M12 5v14" /></svg>Up 25.0% vs May</p>
      <figure className="mt-6">
        <div aria-hidden="true" className="grid grid-cols-6 gap-2">
          <div className="text-center"><div className="flex h-20 items-end"><div className="h-8 w-full rounded-t-md bg-neutral-200"></div></div><p className="mt-2 text-xs text-neutral-500">Jan</p></div>
          <div className="text-center"><div className="flex h-20 items-end"><div className="h-10 w-full rounded-t-md bg-neutral-200"></div></div><p className="mt-2 text-xs text-neutral-500">Feb</p></div>
          <div className="text-center"><div className="flex h-20 items-end"><div className="h-14 w-full rounded-t-md bg-neutral-200"></div></div><p className="mt-2 text-xs text-neutral-500">Mar</p></div>
          <div className="text-center"><div className="flex h-20 items-end"><div className="h-12 w-full rounded-t-md bg-neutral-200"></div></div><p className="mt-2 text-xs text-neutral-500">Apr</p></div>
          <div className="text-center"><div className="flex h-20 items-end"><div className="h-16 w-full rounded-t-md bg-neutral-200"></div></div><p className="mt-2 text-xs text-neutral-500">May</p></div>
          <div className="text-center"><div className="flex h-20 items-end"><div className="h-20 w-full rounded-t-md bg-neutral-900"></div></div><p className="mt-2 text-xs text-neutral-500">Jun</p></div>
        </div>
        <figcaption className="sr-only">Monthly totals: Jan 19,316; Feb 24,145; Mar 33,803; Apr 28,974; May 38,632; Jun 48,290.</figcaption>
      </figure>
      <p className="mt-5 border-t border-neutral-200 pt-3 text-xs text-neutral-500">Chart note: monthly totals</p>
    </article>
  )
}

Pattern notes

When to use: Use to show a recent multi-period trend alongside its current figure. Pick stat-card-figure-delta for a single comparison, or stat-card-progress-target for progress against a goal. Variations: show six weeks, use counts instead of totals, or emphasize the previous period instead of the latest.
Hierarchy: Read the 30px semibold tabular June value of 48,290, then the 14px label, 12px Jun period and Up 25.0% vs May comparison. May is 38,632, so the increase is 9,658, or 25.0%. Six bars have heights 32, 40, 56, 48, 64 and 80px; earlier bars are neutral-200 and the last is neutral-900. The chart is aria-hidden, with all six figures in a screen-reader figcaption. Slots: label up to 3 words, monthly value up to 7 characters, comparison up to 7 words, note up to 6 words.
Responsive: The width steps from 288px to 320px at 640px. All six columns stay equal at both widths, while the 80px chart height, gaps, card padding and typography remain fixed.
Layout: A 288px w-72 card, 320px sm:w-80 from 640px, with 24px p-6 padding, an 8px radius and a 1px border. The metric label and period share a space-between row; the figure sits 12px below. The comparison follows by 8px. A six-column grid starts 24px later with 8px gaps, 80px bottom-aligned bar frames, and month labels 8px below. A note follows a divider with 20px top margin and 12px padding.
States: The card has no controls or hover, focus, open, selected or disabled states. The comparison includes both an arrow and Up. The decorative bars do not carry information alone; the textual total and figcaption give the values.

Desktop wireframe

┌──────────────────────────────────────────────┐
│ Metric label                          Jun    │
│ 48,290                                       │
│ ^ Up 25.0% vs May                            │
│                                              │
│                                    ┌───┐     │
│                                    │   │     │
│                             ┌───┐  │   │     │
│               ┌───┐         │   │  │   │     │
│               │   │  ┌───┐  │   │  │   │     │
│        ┌───┐  │   │  │   │  │   │  │   │     │
│ ┌───┐  │   │  │   │  │   │  │   │  │   │     │
│ │   │  │   │  │   │  │   │  │   │  │   │     │
│ │   │  │   │  │   │  │   │  │   │  │   │     │
│ │   │  │   │  │   │  │   │  │   │  │   │     │
│ └───┘  └───┘  └───┘  └───┘  └───┘  └───┘     │
│  Jan    Feb    Mar    Apr    May    Jun      │
│                                              │
│ ──────────────────────────────────────────   │
│ Chart note: monthly totals                   │
└──────────────────────────────────────────────┘

View all

Stat cards — Activity calendar
Layout tags: grid,numbers,compact
Stat cards — Benchmark range
Layout tags: numbers,compact
Stat cards — Figure with change and link
Layout tags: stacked,numbers,compact

Stat cards — Figure with bar chart

Pattern notes

More in Stat cards

Stat cards — Activity calendar

Stat cards — Benchmark range

Stat cards — Figure with change and link