analytics visitors chart bar-chart metric dashboard widget analytics visitors traffic bar chart sparkline weekly metric show visitor analytics display traffic overview visualize weekly stats
Analytics Widget
Fetch pattern JSON:
curl https://webspire.de/patterns/analytics-widget/base.json base.html
<section class="ws-analytics-widget bg-[var(--ws-analytics-widget-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-xs overflow-hidden rounded-2xl border border-[var(--ws-analytics-widget-border)] bg-[var(--ws-analytics-widget-bg)] shadow-md">
<div class="px-6 pt-6 pb-4">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-[var(--ws-analytics-widget-text-soft)]">Visitors</p>
<span class="text-xs text-[var(--ws-analytics-widget-text-muted)]">Last 7 days</span>
</div>
<div class="mt-3 flex items-baseline gap-3">
<span class="text-3xl font-bold tracking-tight text-[var(--ws-analytics-widget-text)]">12,847</span>
<span class="inline-flex items-center gap-0.5 rounded-full bg-[var(--ws-analytics-widget-positive)]/15 px-2 py-0.5 text-xs font-semibold text-[var(--ws-analytics-widget-positive)]">
<span aria-hidden="true">↑</span>
18.2%
</span>
</div>
</div>
<div class="px-6 pb-2">
<div class="flex h-24 items-end gap-1.5" role="img" aria-label="Daily visitor count for the last 7 days">
<div class="flex flex-1 flex-col items-center gap-1">
<div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent-soft)]" style="height: 52%"></div>
<span class="text-[10px] text-[var(--ws-analytics-widget-text-muted)]">Mon</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1">
<div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent-soft)]" style="height: 68%"></div>
<span class="text-[10px] text-[var(--ws-analytics-widget-text-muted)]">Tue</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1">
<div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent-soft)]" style="height: 45%"></div>
<span class="text-[10px] text-[var(--ws-analytics-widget-text-muted)]">Wed</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1">
<div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent-soft)]" style="height: 80%"></div>
<span class="text-[10px] text-[var(--ws-analytics-widget-text-muted)]">Thu</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1">
<div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent-soft)]" style="height: 72%"></div>
<span class="text-[10px] text-[var(--ws-analytics-widget-text-muted)]">Fri</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1">
<div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent-soft)]" style="height: 58%"></div>
<span class="text-[10px] text-[var(--ws-analytics-widget-text-muted)]">Sat</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1">
<div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent)]" style="height: 92%"></div>
<span class="text-[10px] font-medium text-[var(--ws-analytics-widget-text-soft)]">Sun</span>
</div>
</div>
</div>
<div class="px-6 pb-5 pt-2">
<p class="text-xs text-[var(--ws-analytics-widget-text-muted)]">Avg 1,835/day</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
analyticsvisitorschartbar-chartmetricdashboardwidget
A compact analytics card displaying a headline visitor count, a positive-change badge, and a CSS-only bar chart spanning seven days. The current day bar is highlighted with the primary accent color. Ideal for dashboard headers, admin panels, and site-overview widgets.