Sunburst
<o-sunburst> draws a tree as nested rings: one ring per level, each child inside its parent. Click a branch to zoom in, click the middle to go back.
Every level is a ring of <o-arc>s with a value. Orbit stacks them in order, and because children come in the same order as their parents, each one lands inside its parent with no angles to compute. A branch that ends early leaves a transparent spacer in the rings outside it, so everything stays lined up.
A node is worth its value, or the sum of its children when there is no value or the sum is larger. A value above the sum leaves part of the branch empty in the next ring, which is how you show “the rest”.
Zoom
Clicking a branch puts it in the middle and spreads its children around the whole circle. The rings move in, the slices outside the branch fold away, and the middle gets a tint of the branch color. Click the middle to go up one level. With prefers-reduced-motion the change is instant.
levels sets how many rings show at once (4 by default). A deeper tree is still there: zooming in brings the next levels into view.
Attributes
| Attribute | Default | What it does |
|---|---|---|
data | [] | The tree: { label, value?, color?, children? }, or an array of top-level nodes. Up to eight levels; deeper ones count as part of their parent. |
label | the root's label | Name of the whole, shown in the middle and used as the accessible name. |
levels | 4 | Rings shown at once, 1 to 6. |
hole | auto | Radius of the middle, in lanes (a lane is a twelfth of the radius). By default 3.6, or more when there are few rings so they do not get too thick. |
gap | 1 | Space between slices. |
from | 0 | Angle where the first slice starts, in degrees. |
labels | true | Names along the slices that have room for them. labels="false" turns them off. |
size | 320px | Width of the widget. |
unit, format, decimals, currency, locale | Number format of the middle and the accessible names. percent is the share of the whole tree. See Shared options. | |
theme | dark, light or glass. Also inherited from an ok-theme-* class on a container. See Shared options. |
Top-level branches take the next color of the palette (teal, amber, coral, violet, blue, lime, pink, yellow) and their children lighter shades of it. A color on any node replaces its shade, and its children are shaded from it. A label shows only when it fits along its slice and across the band, so small slices stay clean; it reads upright on the lower half.
Properties, methods and events
| Name | What it does |
|---|---|
data | The tree as an object. Setting it writes the attribute. When the new tree still has the branch you zoomed into, the zoom stays. |
path | Indexes of the branch in the middle, [] at the top. |
zoom(path) | Zoom into the branch at path, such as [0, 1]. |
zoomOut(), reset() | Go up one level, or back to the top. |
formatter | A function (value, context) => string for every number. See Shared options. |
select | A slice was clicked, or chosen with Enter or Space. event.detail has label, value, item (your object), path, labels (the names from the top) and depth. |
navigate | The branch in the middle changed. event.detail has path and depth. |
Both events bubble. Clicking a branch fires select and then zooms; clicking a leaf only selects it.
Styling
| Property | Default | What it does |
|---|---|---|
--ok-sunburst-tint | #fff | What children are mixed with to get their lighter shade. |
--ok-sunburst-label | #0c0f13 | Color of the names on the slices. |
--ok-sunburst-label-size | clamp(10px, 3.3cqmin, 15px) | Size of those names. |
--ok-sunburst-dim | .3 | Opacity of the slices outside the lit branch. |
--ok-sunburst-muted | the text color at 62% | The path and the share in the middle. |
--ok-text | inherits | The value in the middle. |
--ok-focus | #e8edf2 | Outline of the slice in keyboard focus. |
--ok-sunburst-value-size | 23cqmin | Size of the value in the middle, as a share of the middle. |
While a zoom runs, the element has the class is-moving and the names on the slices are hidden.
More examples
Following the selection
select writes the path under the chart; navigate turns the button on when there is somewhere to go back to.Two rings at a time
Percent of the whole
Accessibility
The element is one tab stop with role="tree". The drawing is hidden from assistive technology; next to it is a visually hidden list with the same tree, one treeitem per node with its level, position and a name like “Focus: 22 h, 52% of Work”. Keyboard focus moves through that list with aria-activedescendant, and the focused slice gets an outline and lights its branch.
Left and Right move to the previous and next sibling, Home and End to the first and last. Up goes out to the first child, zooming in when the children are past the outer ring. Down comes back in to the parent, and from the first ring to the middle. Enter or Space chooses a slice (and zooms into a branch), or goes up from the middle; Escape and Backspace go up one level.