Skip to content
Orbit

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.

Examples include the current Orbit stylesheet and runtime. Get both files for your project.

How it works

Section titled “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, each value represents a percentage of the parent range. Use values that sum to 100 for a complete ring, or less for a partial ring. Normalize raw data to percentages in your application.
  • 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

Section titled “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 the interactive attribute to each arc, then styling its hover state:

<o-arc interactive value="50"></o-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).

Section titled “Related”

Use this in your project

Section titled “Use this in your project”

Install Orbit and the markup above is your entire chart.