chart bar-chart grouped chart-js comparison users page-views devices grouped bar chart comparison users page-views devices side-by-side grouped bar chart side by side bar chart two dataset bar chart
Grouped Bar Chart
Fetch pattern JSON:
curl https://webspire.de/patterns/chart/grouped-bar.json grouped-bar.html
<section class="ws-chart bg-[var(--ws-chart-card-bg)] py-10">
<div class="mx-auto max-w-2xl px-6">
<div class="overflow-hidden rounded-2xl border border-[var(--ws-chart-card-border)] bg-[var(--ws-chart-card-bg)] p-6 shadow-sm">
<div class="mb-5 flex items-start justify-between">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-[var(--ws-chart-card-text-soft)]">By Device</p>
<h2 class="text-lg font-bold text-[var(--ws-chart-card-text)]">Users & Page Views</h2>
</div>
<div class="flex items-center gap-4 text-xs text-[var(--ws-chart-card-text-soft)]">
<span class="flex items-center gap-1.5"><span class="inline-block h-2.5 w-2.5 rounded-sm bg-indigo-400"></span>Users</span>
<span class="flex items-center gap-1.5"><span class="inline-block h-2.5 w-2.5 rounded-sm bg-teal-400"></span>Page Views</span>
</div>
</div>
<!-- Grouped bars: max value 1553 -->
<!-- Users: Desktop 510→33%, Mobile 653→42%, Tablet 255→16% -->
<!-- PageViews: Desktop 1251→81%, Mobile 1553→100%, Tablet 1355→87% -->
<div class="flex h-44 items-end gap-6" role="img" aria-label="Grouped bar chart comparing users and page views by device">
<!-- Desktop -->
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="flex w-full items-end justify-center gap-1">
<div class="flex-1 rounded-t-md bg-indigo-400" style="height:58px"></div>
<div class="flex-1 rounded-t-md bg-teal-400" style="height:142px"></div>
</div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Desktop</span>
</div>
<!-- Mobile -->
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="flex w-full items-end justify-center gap-1">
<div class="flex-1 rounded-t-md bg-indigo-400" style="height:74px"></div>
<div class="flex-1 rounded-t-md bg-teal-400" style="height:176px"></div>
</div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Mobile</span>
</div>
<!-- Tablet -->
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="flex w-full items-end justify-center gap-1">
<div class="flex-1 rounded-t-md bg-indigo-400" style="height:29px"></div>
<div class="flex-1 rounded-t-md bg-teal-400" style="height:153px"></div>
</div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Tablet</span>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Tailwind Only SSR Safe Copy & Paste
Stable Published
chartbar-chartgroupedchart-jscomparisonuserspage-viewsdevices
Two bar series (Users in indigo, Page Views in teal) grouped side by side for Desktop, Mobile, and Tablet. Stacking is disabled. The inline legend above the chart uses colored squares matching the bar colors.