Skip to content
Orbit CSS radial UI composer

CSS sunburst chart — Orbit hierarchical example

A sunburst chart is a pie chart that goes deep. Each ring is a level of hierarchy: the inner ring shows the broadest categories, the next ring breaks each of those into subcategories, and the outer ring drills further. It’s the right chart when your data is genuinely nested — product catalogs, organizational structures, file system breakdowns — and a flat pie would lose all that structure.

This example builds a three-level sunburst showing market share for phone makers, broken down by product line, broken down again by individual model. Each level is its own orbit.

How it works

  • Three concentric orbits, three levels of hierarchy. orbit-2 is the inner ring (top-level brands). orbit-4 is the middle ring (product lines), and orbit-6 is the outer ring (individual models). Each orbit is its own loop of <o-arc> elements.
  • range-X and from-X constrain a sub-orbit to a specific arc of the parent. The middle ring uses range-198 because the Apple slice (55%) plus Xiaomi (20%) covers about 198° of the circle — only those subcategories belong on the middle ring. The outer ring uses from-138 range-46 to drill down only into the iPhone subcategory.
  • flip on a label-bearing <o-arc> flips text upside-down so it remains readable when the arc is on the bottom half of the chart.
  • Color hierarchy by lightness, not hue. Inner ring uses solid --o-blue; middle ring uses --o-blue-light; outer ring uses --o-blue-lighter. This visual cue tells the reader “these belong together” without needing a legend.

Customization

Drill into a different brand by changing the from-X and range-X on the outer rings to cover a different arc segment.

Make it interactive by attaching click handlers that re-render the outer rings to drill into the clicked slice:

arc.addEventListener('click', () => {
  outerRing.style.setProperty('--from', arc.style.getPropertyValue('--start'));
  outerRing.style.setProperty('--range', arc.style.getPropertyValue('--span'));
});

Use it for org charts by replacing brands → divisions → teams. The nesting model is identical.

Use this in your project

Install Orbit CSS and adapt the data values above to your own hierarchy.