Pie Chart with Data Labels

<section class="ws-chart bg-[var(--ws-chart-card-bg)] py-10">
  <div class="mx-auto max-w-md 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)]">Traffic Distribution</p>
        <h2 class="text-lg font-bold text-[var(--ws-chart-card-text)]">Share by Month</h2>
      </div>
      <!-- Pie via conic-gradient: Jan 11.4%, Feb 17.1%, Mar 23.6%, Apr 24.7%, May 23.2% -->
      <div class="flex flex-col items-center gap-6" role="img" aria-label="Pie chart showing traffic share by month">
        <div class="h-44 w-44 rounded-full" style="background: conic-gradient(#6366f1 0% 11.4%, #14b8a6 11.4% 28.5%, #3b82f6 28.5% 52.1%, #a855f7 52.1% 76.8%, #ef4444 76.8% 100%)"></div> <!-- ws-ok -->
        <!-- Legend with percentages -->
        <div class="grid w-full grid-cols-2 gap-x-6 gap-y-2">
          <div class="flex items-center gap-2 text-sm">
            <span class="h-2.5 w-2.5 shrink-0 rounded-sm bg-indigo-500"></span>
            <span class="text-[var(--ws-chart-card-text-soft)]">January</span>
            <span class="ml-auto font-semibold text-[var(--ws-chart-card-text)]">11.4%</span>
          </div>
          <div class="flex items-center gap-2 text-sm">
            <span class="h-2.5 w-2.5 shrink-0 rounded-sm bg-teal-500"></span>
            <span class="text-[var(--ws-chart-card-text-soft)]">February</span>
            <span class="ml-auto font-semibold text-[var(--ws-chart-card-text)]">17.1%</span>
          </div>
          <div class="flex items-center gap-2 text-sm">
            <span class="h-2.5 w-2.5 shrink-0 rounded-sm bg-blue-500"></span>
            <span class="text-[var(--ws-chart-card-text-soft)]">March</span>
            <span class="ml-auto font-semibold text-[var(--ws-chart-card-text)]">23.6%</span>
          </div>
          <div class="flex items-center gap-2 text-sm">
            <span class="h-2.5 w-2.5 shrink-0 rounded-sm bg-purple-500"></span>
            <span class="text-[var(--ws-chart-card-text-soft)]">April</span>
            <span class="ml-auto font-semibold text-[var(--ws-chart-card-text)]">24.7%</span>
          </div>
          <div class="flex items-center gap-2 text-sm">
            <span class="h-2.5 w-2.5 shrink-0 rounded-sm bg-red-500"></span>
            <span class="text-[var(--ws-chart-card-text-soft)]">May</span>
            <span class="ml-auto font-semibold text-[var(--ws-chart-card-text)]">23.2%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>