Skip to content
Orbit CSS radial UI composer

CSS donut chart — Orbit example

A donut chart is a pie chart with the center cut out, and that empty center is the whole point: it gives you a place to put a total, a label, or a context-setting number. A pie chart with “$1.2M total” written on top of one of the slices is unreadable; a donut with “$1.2M” sitting in the empty middle reads instantly.

This example builds a 5-segment donut with values that add up to 100. Orbit handles the angle math for you — you just pass value="50" and the arc takes up half the ring. The labels sit on the same orbit as the arcs, positioned by angle.

How it works

  • <o-arc value="X"> is the entire chart engine. When you put multiple <o-arc> elements inside an orbit and give each a value, Orbit treats the values as weights and sizes each arc proportionally. The values don’t have to sum to 100 — Orbit normalizes them.
  • gap-0 removes the small separation between segments that <o-arc> adds by default. For a donut chart you usually want the segments touching; for a pie-with-emphasis you might leave the gap in.
  • grow-1x sets the arc thickness. Larger values (grow-2x, grow-3x) thicken the donut ring; the unfilled center grows accordingly. To turn this into a full pie chart, increase grow until the center disappears.
  • Labels are positioned by angle, not by data binding. Each label satellite has an angle-X class that points it to the middle of its corresponding arc. To compute these dynamically: angle = startAngle + (cumulativeValue + halfThisValue) / totalValue * 360.

Customization

Add a center total by placing a satellite in the empty middle:

<div class="orbit-0">
  <div class="satellite">
    <div class="capsule">100</div>
  </div>
</div>

Make it a hover-interactive chart by adding pointer events to each arc:

o-arc { transition: --o-fill 0.2s; cursor: pointer; }
o-arc:hover { --o-fill: var(--o-purple); }

Switch to a 3D donut by stacking two donuts at slightly different --o-stroke-width values and offsetting one with transform: translateY(-2px).

Use this in your project

Install Orbit CSS and the markup above is your entire chart.