Donut
<o-donut> draws a donut chart from a JSON array.
Each item becomes an <o-arc> with a value, and Orbit stacks them one after another around the ring. Values are shares of their sum, or of total when you want a ring that is not full.
Attributes
| Attribute | Default | What it does |
|---|---|---|
data | [] | Segments: [{ value, color?, label? }]. Without a color, a segment takes the next one of the palette. |
total | the sum | What a full ring is worth. With total="100" and values that add up to 70, 30% stays empty. |
range / from | 360 / 0 | Arc span and start angle, in degrees. |
label / unit | Text in the middle. | |
thickness | 3 | Band thickness in lanes. |
gap | 1.5 | Space between segments, in percent of the widget width. |
shape | none | Segment endings. rounded gives pill-shaped segments. |
track | faint gray | Color of the ring behind the segments, seen in the gaps and in an empty part. |
size | 200px | Width of the widget. |
glow | off | A glow in each segment color. |
format, decimals, currency, locale | Number format of segment titles and the accessible name; percent is the share of the total, through Intl.NumberFormat. See Shared options. | |
theme | dark, light or glass. Also inherited from an ok-theme-* class on a container. See Shared options. |
Change data with the same number of items and the arcs are patched in place. A different count rebuilds the ring.
Styling
| Property | Default | What it does |
|---|---|---|
--ok-track | rgba(127,127,127,.12) | Ring behind the segments. |
--ok-hub-color | inherits | Color of the readout in the middle. |
--ok-hub-bg | none | Background of the hole in the middle. |
--ok-hub-size | 1.4em | Font size of the readout. |
--ok-font-size | 8cqmin | Base font size, as a share of the widget. Text scales with it. |
More examples
Rounded segments with wider gaps
A partial ring
Updating the data
Accessibility
The donut has role="img" and a name that lists every segment, such as “Rent: 52; Food: 28; Other: 20”. Give items a label so the list makes sense; each segment also shows it as a tooltip. Set aria-label to replace the generated name. When colors are close, add the numbers somewhere in text as well.