CSS-only 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 removes that step entirely. Each slice is an <o-arc> element with a value attribute. The arcs auto-size based on their values. There’s no SVG, no canvas, and no JavaScript.
These three examples cover the most useful radial chart types.
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
| 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.
Related
<o-arc>element reference- Use case: dashboards
- Gauges — when you need a needle on top of an arc