Sunburst chart
A hierarchy drawn as rings, the whole at the centre and each ring splitting its parent: budgets, disk usage and org spend, with click to zoom.
A sunburst draws a hierarchy as rings: the centre is the whole, the first ring splits it into its top-level branches, and
each ring further out splits its parent, the way disk-usage tools show folders and a budget breaks down by department,
team and line item. Where a treemap packs many parts into rectangles, a sunburst shows the levels themselves, and clicking
a branch zooms into it. One row is one node, named by label-field and sized by the single series. It is drawn by
ECharts’ sunburst series.
Import
import '@c2n/components/chart/sunburst-chart'This chart draws with ECharts 6, a peer dependency it loads on first draw: npm install echarts.
Usage
Data
Rows are read the treemap’s way. A row is a node: label-field names it, and the one
c2-chart-series sizes it. Rows without a positive value are left out, and so is a group left empty.
- Nested rows with
children-field(childrenby default). A row with children is a group of them and is sized by them, as a folder is by its files; children may nest to any depth. - Flat rows with
group-field. The field names the group a row belongs to; a comma-separated list nests the groups, outermost first:group-field="region, sector".
Siblings run clockwise from twelve o’clock, largest first. The nodes getter returns every group and leaf in that
order, each with its path, value, share of the whole and share of its group.
Rings and colour
levels (3 by default) caps how many rings show from the current centre; deeper levels come into view as the reader
zooms, and a branch with fewer levels spreads them over the whole radius. Each top-level branch takes the next colour of
--c2-chart__series-1…8--color, and below it siblings step lighter toward the surface, largest darkest, so a zoomed
branch is never one flat colour. A node keeps its colour when it is zoomed into view.
With color-field, every segment is coloured by that field on the treemap’s scale around zero instead, from
--c2-chart__neutral--color toward --c2-chart__positive--color and --c2-chart__negative--color, at full strength at
color-max; a group takes the value-weighted mean of its leaves.
Names are drawn where they fit (labels="auto"): along the arc on the first ring and on wide arcs, along the radius on
narrow, deep ones, never upside down. A segment too small for its name stays blank, and the tooltip still names it;
labels="none" hides them all. The hole shows the current centre’s name (“Total” at the top) and value, and the
center slot replaces it. value-prefix and value-suffix frame every value, or a series’ format formats it.
--c2-chart__segment--gap, --c2-chart__segment--border-radius and --c2-chart__hole--size (a share of the radius)
set the shape.
Zoom
Clicking a group makes it the centre: its children form the first ring, a breadcrumb (“All › Engineering”) appears top
left, and the hole becomes a “Back to All” button that goes up one level. zoom-change fires first with the new
path and node; it is cancelable, so an app can load a branch before showing it. root holds the zoom as a path
of names (an attribute takes it as JSON, and a server renders the breadcrumb from it), and zoomTo(path) and
zoomOut() drive it from code. breadcrumb="none" hides the breadcrumb. The arcs morph into the new layout in 400 ms,
or at once under reduced motion or animation="none".
Clicking a leaf fires point-click and highlights it, dimming everything off its path, as on the other charts.
Interaction and accessibility
Hovering a segment keeps its path to the centre and fades everything else to --c2-chart__series__dimmed--opacity.
The tooltip gives the path, the value and its shares of the whole and of its group.
The plot is one tab stop. The left and right arrows move around a ring between siblings, down goes to the first child
and up to the parent; Enter zooms into a group (or clicks a leaf), and Escape or Backspace zooms out. The focused
segment gets a ring in --c2-chart__segment__focus--color, and a polite announcement reads it (“Sales › Field, $1.6M,
13.7% of total, 2 items”). The plot is named by a summary, and a visually hidden table lists every leaf with its path,
value and shares.
The labels already name the branches, so the legend is off by default; legend="bottom" lists the top-level branches
for a small sunburst without labels, and with legend-action="toggle" an entry hides its branch
(setGroupVisible(name, false) does the same from code).