Skip to content
Orbit

Radial charts built with Orbit

Charts are usually the moment in a project where you reach for a 200KB charting library. For radial charts in particular — pies, donuts, sunbursts — that’s overkill: the data shape is simple, the layout is fixed, and the only thing the library is really doing is computing arc paths and labeling them. Orbit handles that geometry for you. Each slice is an <o-arc> element with a value attribute. The arcs auto-size based on their values. You compose the chart with HTML and CSS; the Orbit runtime generates and updates the SVG paths.

These three examples cover the most useful radial chart types.

Examples

Section titled “Examples”
Donut chart A 5-slice donut with category labels at each segment. Best for high-level KPI breakdowns and 'where is your time/money going' displays.
Pie chart A solid 5-slice pie chart with no center hole. Best for proportions where you don't need a center label.
Sunburst chart A multi-level hierarchical sunburst with three rings of increasing detail. Best for nested category breakdowns and drill-down data.

Donut vs pie vs sunburst

Section titled “Donut vs pie vs sunburst”
Use case Recommended
Single-level breakdown with a centerable total Donut
Single-level breakdown, dense layout Pie
Hierarchical / nested categories Sunburst

All three are built from <o-arc> elements and weighted with the value attribute. Once you understand the donut, the other two are minor variations.

Section titled “Related”