chart bar-chart chart-js multicolor traffic monthly bar chart multicolor colored monthly traffic multicolor bar chart colored bar chart
Multicolor Bar Chart
Fetch pattern JSON:
curl https://webspire.de/patterns/chart/bar-multicolor.json bar-multicolor.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">
<p class="text-xs font-semibold uppercase tracking-widest text-[var(--ws-chart-card-text-soft)]">Monthly Traffic</p>
<h2 class="text-lg font-bold text-[var(--ws-chart-card-text)]">Visitors by Month</h2>
</div>
<!-- Chart area -->
<div class="flex h-44 items-end gap-2" role="img" aria-label="Bar chart showing monthly traffic Jan–Jun">
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="w-full rounded-t-md bg-indigo-400" style="height:46%"></div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Jan</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="w-full rounded-t-md bg-sky-400" style="height:23%"></div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Feb</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="w-full rounded-t-md bg-emerald-400" style="height:95%"></div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Mar</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="w-full rounded-t-md bg-amber-400" style="height:100%"></div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Apr</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="w-full rounded-t-md bg-red-400" style="height:94%"></div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">May</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="w-full rounded-t-md bg-purple-400" style="height:9%"></div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Jun</span>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Tailwind Only SSR Safe Copy & Paste
Stable Published
chartbar-chartchart-jsmulticolortrafficmonthly
Bar chart with six monthly data points. Each bar gets its own color from an indigo–sky–emerald–amber–red–purple palette with matching border and axis tick colors. Animations disabled for instant render.