metrics kpi dashboard chart trend analytics sparkline metrics kpi chart sparkline trend bar chart dashboard metric cards with mini charts KPI grid with trend visualization
Metric Grid With Chart
Fetch pattern JSON:
curl https://webspire.de/patterns/metric-grid/with-chart.json with-chart.html
<section class="ws-metric-grid-chart" style="--ws-metric-grid-bg: var(--ws-color-surface); --ws-metric-grid-text: var(--ws-color-text); --ws-metric-grid-text-soft: var(--ws-color-text-soft); --ws-metric-grid-border: var(--ws-color-border); --ws-metric-grid-accent: var(--ws-color-primary);">
<div class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
<!-- Revenue -->
<div class="rounded-2xl border border-[var(--ws-metric-grid-border)] bg-[var(--ws-metric-grid-bg)] p-6 shadow-md">
<div class="flex items-start gap-4">
<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"/></svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-[var(--ws-metric-grid-text-soft)]">Revenue</p>
<p class="mt-1 text-3xl font-bold tabular-nums tracking-tight text-[var(--ws-metric-grid-text)]">$45.2k</p>
<p class="mt-1 text-sm font-medium tabular-nums text-emerald-600" aria-label="Up 12 percent">
<span aria-hidden="true">↑</span> 12%
</p>
</div>
</div>
<!-- Mini bar chart -->
<div class="mt-4 flex items-end gap-1.5" role="img" aria-label="Revenue trend over last 4 periods: rising">
<div class="h-4 w-full rounded-sm bg-emerald-200"></div>
<div class="h-6 w-full rounded-sm bg-emerald-300"></div>
<div class="h-5 w-full rounded-sm bg-emerald-300"></div>
<div class="h-8 w-full rounded-sm bg-emerald-500"></div>
</div>
</div>
<!-- Users -->
<div class="rounded-2xl border border-[var(--ws-metric-grid-border)] bg-[var(--ws-metric-grid-bg)] p-6 shadow-md">
<div class="flex items-start gap-4">
<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-[var(--ws-metric-grid-text-soft)]">Users</p>
<p class="mt-1 text-3xl font-bold tabular-nums tracking-tight text-[var(--ws-metric-grid-text)]">2,340</p>
<p class="mt-1 text-sm font-medium tabular-nums text-emerald-600" aria-label="Up 8 percent">
<span aria-hidden="true">↑</span> 8%
</p>
</div>
</div>
<!-- Mini bar chart -->
<div class="mt-4 flex items-end gap-1.5" role="img" aria-label="Users trend over last 4 periods: rising">
<div class="h-3 w-full rounded-sm bg-blue-200"></div>
<div class="h-5 w-full rounded-sm bg-blue-300"></div>
<div class="h-7 w-full rounded-sm bg-blue-400"></div>
<div class="h-8 w-full rounded-sm bg-blue-500"></div>
</div>
</div>
<!-- Orders -->
<div class="rounded-2xl border border-[var(--ws-metric-grid-border)] bg-[var(--ws-metric-grid-bg)] p-6 shadow-md">
<div class="flex items-start gap-4">
<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-amber-100 text-amber-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-[var(--ws-metric-grid-text-soft)]">Orders</p>
<p class="mt-1 text-3xl font-bold tabular-nums tracking-tight text-[var(--ws-metric-grid-text)]">1,234</p>
<p class="mt-1 text-sm font-medium tabular-nums text-rose-600" aria-label="Down 3 percent">
<span aria-hidden="true">↓</span> 3%
</p>
</div>
</div>
<!-- Mini bar chart -->
<div class="mt-4 flex items-end gap-1.5" role="img" aria-label="Orders trend over last 4 periods: declining">
<div class="h-8 w-full rounded-sm bg-amber-400"></div>
<div class="h-6 w-full rounded-sm bg-amber-300"></div>
<div class="h-7 w-full rounded-sm bg-amber-300"></div>
<div class="h-5 w-full rounded-sm bg-amber-200"></div>
</div>
</div>
<!-- Conversion -->
<div class="rounded-2xl border border-[var(--ws-metric-grid-border)] bg-[var(--ws-metric-grid-bg)] p-6 shadow-md">
<div class="flex items-start gap-4">
<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-violet-100 text-violet-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-[var(--ws-metric-grid-text-soft)]">Conversion</p>
<p class="mt-1 text-3xl font-bold tabular-nums tracking-tight text-[var(--ws-metric-grid-text)]">3.2%</p>
<p class="mt-1 text-sm font-medium tabular-nums text-emerald-600" aria-label="Up 0.5 percent">
<span aria-hidden="true">↑</span> 0.5%
</p>
</div>
</div>
<!-- Mini bar chart -->
<div class="mt-4 flex items-end gap-1.5" role="img" aria-label="Conversion trend over last 4 periods: rising">
<div class="h-4 w-full rounded-sm bg-violet-200"></div>
<div class="h-3 w-full rounded-sm bg-violet-200"></div>
<div class="h-6 w-full rounded-sm bg-violet-400"></div>
<div class="h-8 w-full rounded-sm bg-violet-500"></div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
metricskpidashboardcharttrendanalyticssparkline
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Grid of metric cards with icon, value, change indicator, and mini bar chart. |
Extends the base metric grid with a small CSS bar chart (4 bars) below each metric value, showing a mini trend. Adjust bar heights via Tailwind height classes to reflect real data.