Funnel Chart

Fetch pattern JSON: curl https://webspire.de/patterns/chart/funnel.json

funnel.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-6">
        <p class="text-xs font-semibold uppercase tracking-widest text-[var(--ws-chart-card-text-soft)]">Conversion</p>
        <h2 class="text-lg font-bold text-[var(--ws-chart-card-text)]">Sales Funnel</h2>
      </div>
      <!-- Horizontal funnel bars: 2112 → 100%, 343 → 16.2%, 45 → 2.1% -->
      <div class="flex flex-col gap-3" role="img" aria-label="Funnel chart: product views, checkout, purchases">
        <div class="flex items-center gap-3">
          <span class="w-28 shrink-0 text-right text-sm font-medium text-[var(--ws-chart-card-text)]">Product views</span>
          <div class="flex h-8 flex-1 items-center overflow-hidden rounded-md bg-[var(--ws-chart-card-border)]">
            <div class="flex h-full items-center rounded-md bg-indigo-400 px-3" style="width:100%">
              <span class="text-xs font-semibold text-white">2,112</span>
            </div>
          </div>
          <span class="w-10 shrink-0 text-right text-sm font-semibold text-[var(--ws-chart-card-text-soft)]">100%</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-28 shrink-0 text-right text-sm font-medium text-[var(--ws-chart-card-text)]">Checkout</span>
          <div class="flex h-8 flex-1 items-center overflow-hidden rounded-md bg-[var(--ws-chart-card-border)]">
            <div class="flex h-full items-center rounded-md bg-indigo-500 px-3" style="width:16.2%">
              <span class="text-xs font-semibold text-white">343</span>
            </div>
          </div>
          <span class="w-10 shrink-0 text-right text-sm font-semibold text-[var(--ws-chart-card-text-soft)]">16%</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-28 shrink-0 text-right text-sm font-medium text-[var(--ws-chart-card-text)]">Purchases</span>
          <div class="flex h-8 flex-1 items-center overflow-hidden rounded-md bg-[var(--ws-chart-card-border)]">
            <div class="flex h-full items-center rounded-md bg-indigo-600 px-3" style="width:2.1%">
            </div>
            <span class="ml-2 text-xs font-semibold text-[var(--ws-chart-card-text)]">45</span>
          </div>
          <span class="w-10 shrink-0 text-right text-sm font-semibold text-[var(--ws-chart-card-text-soft)]">2%</span>
        </div>
      </div>
    </div>
  </div>
</section>

Details

Family

chart

Tier

base

Kind

component

Responsive Tailwind Only SSR Safe Copy & Paste

Stable Published

chartfunnelhorizontal-barchart-jsconversionsalesdatalabels

Horizontal bar chart with three stages (Product views → Checkout → Purchases). Bar width and opacity decrease towards the bottom of the funnel. Percentage labels computed relative to the first stage are rendered to the right of each bar via chartjs-plugin-datalabels.