Donut Chart Card

Fetch pattern JSON: curl https://webspire.de/patterns/chart-card/donut.json

donut.html

<section class="ws-chart-card bg-[var(--ws-chart-card-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-md overflow-hidden rounded-2xl border border-[var(--ws-chart-card-border)] bg-[var(--ws-chart-card-bg)] shadow-md">
      <div class="px-6 py-5">
        <h3 class="text-lg font-semibold text-[var(--ws-chart-card-text)]">Traffic Sources</h3>
        <p class="text-sm text-[var(--ws-chart-card-text-soft)]">Distribution overview</p>
      </div>

      <div class="flex justify-center px-6 pb-4">
        <div class="relative h-48 w-48" role="img" aria-label="Donut chart: Direct 45%, Organic 35%, Referral 20%">
          <div class="absolute inset-0 rounded-full" style="background: conic-gradient(var(--ws-chart-card-accent) 0deg 162deg, oklch(0.65 0.15 160) 162deg 288deg, oklch(0.7 0.12 280) 288deg 360deg)"></div>
          <div class="absolute inset-8 flex items-center justify-center rounded-full bg-[var(--ws-chart-card-bg)]">
            <div class="text-center">
              <p class="text-2xl font-bold text-[var(--ws-chart-card-text)]">2,847</p>
              <p class="text-xs text-[var(--ws-chart-card-text-soft)]">total</p>
            </div>
          </div>
        </div>
      </div>

      <div class="border-t border-[var(--ws-chart-card-border)] px-6 py-4">
        <ul class="flex flex-col gap-3" aria-label="Traffic source breakdown">
          <li class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <span class="h-3 w-3 rounded-full bg-[var(--ws-chart-card-accent)]" aria-hidden="true"></span>
              <span class="text-sm text-[var(--ws-chart-card-text)]">Direct</span>
            </div>
            <span class="text-sm font-semibold text-[var(--ws-chart-card-text)]">45%</span>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <span class="h-3 w-3 rounded-full" style="background: oklch(0.65 0.15 160)" aria-hidden="true"></span>
              <span class="text-sm text-[var(--ws-chart-card-text)]">Organic</span>
            </div>
            <span class="text-sm font-semibold text-[var(--ws-chart-card-text)]">35%</span>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <span class="h-3 w-3 rounded-full" style="background: oklch(0.7 0.12 280)" aria-hidden="true"></span>
              <span class="text-sm text-[var(--ws-chart-card-text)]">Referral</span>
            </div>
            <span class="text-sm font-semibold text-[var(--ws-chart-card-text)]">20%</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

Details

Family

chart-card

Tier

enhanced

Kind

section

Extends

chart-card/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

chartdonutpietrafficdashboardanalytics

Slots

Name	Required	Description
header	Yes	Chart title and subtitle.
content	Yes	Donut chart with center label and legend.

Donut chart card using CSS conic-gradient for the ring. Center displays “2,847 total”. Legend below shows three sources (Direct 45%, Organic 35%, Referral 20%) with matching color dots. No JavaScript required.