Pie chart

A pie is a donut with the hole closed: each slice is an arc that reaches all the way to the center.

Hover a slice or a row, or Tab through the slices.

How it's built

  • Five <o-arc value> that add up to 100, stacked in DOM order on one ring.
  • inner-orbit puts the outer edge of each arc on orbit-11, and --o-size-ratio: 11 makes it eleven lanes thick: all the way in. Lower it to 6 and you have a donut of the same size.
  • A thin --o-stroke in the background color separates the slices instead of --o-gap, which would leave wedges that narrow to nothing at the center.
  • interactive lets each slice take the pointer and focus. Orbit places arcs with rotate, so a translate of yours adds to it: the slice in focus slides out along its middle.

Related