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

Family

chart

Tier

base

Kind

component

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.