Pie & Donut

A single conic-gradient draws the chart: each --angle-N is the cumulative sweep where segment N ends, and --color-N fills it. data-variant="donut" punches the center hole; the legend (not color) names each slice. The pie is aria-hidden with a .casca-data alternative. No JS. See the API docs for the angle math.

Pie

Market Share
Distribution by category
Market share distribution
CategoryShare
Product A35%
Product B25%
Product C20%
Product D20%
Product A (35%)
Product B (25%)
Product C (20%)
Product D (20%)

Donut (with center total)

Budget Breakdown
Fiscal year 2025
Budget breakdown for fiscal year 2025
DepartmentAmount
Engineering$450k
Marketing$300k
Sales$270k
Operations$180k
Engineering ($450k)
Marketing ($300k)
Operations ($180k)
Sales ($270k)

Markup

<div class="casca" style="max-width: 360px">
  <div class="casca-title">Market Share</div>
  <table class="casca-data"><!-- accessible rows --></table>

  <div class="casca-pie" aria-hidden="true">
    <!-- --angle-N are CUMULATIVE end-stops (deg); --color-N fills each slice -->
    <div class="casca-pie-chart" data-segments="4"
         style="--angle-1: 126deg; --angle-2: 216deg; --angle-3: 288deg;
                --color-1: var(--casca-color-1); --color-2: var(--casca-color-2);
                --color-3: var(--casca-color-3); --color-4: var(--casca-color-4)"></div>
  </div>
</div>

<!-- donut: add data-variant="donut" and an optional centre -->
<div class="casca-pie-chart" data-segments="4" data-variant="donut" ...>
  <div class="casca-pie-center">$1.2M<span class="casca-pie-center-label">Total</span></div>
</div>