Charts

Sunburst Chart

A hierarchy as nested rings — each ring is a level, each segment its share of the parent. Click a segment to zoom in, the centre to go back. Drawn as SVG by the component, rendered on the server and themed by the design tokens.

Part of @tectra-ng/charts (npm install @tectra-ng/charts, also included in tectra-ng).

Features10

API

Theming

Basic

Each ring is a level and each segment its share of the parent; deeper rings fade from the colour of their branch. Click a segment with children to zoom into it, the centre to go back.

Disk usage. Sunburst chart, GB used 150: Photos 52%, Work 29.3%, Music 12%, Apps 6.7%
Category	Value	Of total
Photos	78	52%
Photos / 2024	33	22%
Photos / 2024 / Trips	18	12%
Photos / 2024 / Family	11	7.3%
Photos / 2024 / Other	4	2.7%
Photos / 2025	31	20.7%
Photos / 2025 / Trips	22	14.7%
Photos / 2025 / Family	9	6%
Photos / 2026	14	9.3%
Work	44	29.3%
Work / Projects	35	23.3%
Work / Projects / Design	12	8%
Work / Projects / Code	7	4.7%
Work / Projects / Video	16	10.7%
Work / Archive	9	6%
Music	18	12%
Music / Albums	13	8.7%
Music / Podcasts	5	3.3%
Apps	10	6.7%

Levels

levels limits the rings shown at once — deeper levels appear as you zoom in. showLabels turns the names off.

Disk usage, two levels. Sunburst chart, Total 150: Photos 52%, Work 29.3%, Music 12%, Apps 6.7%
Category	Value	Of total
Photos	78	52%
Photos / 2024	33	22%
Photos / 2025	31	20.7%
Photos / 2026	14	9.3%
Work	44	29.3%
Work / Projects	35	23.3%
Work / Archive	9	6%
Music	18	12%
Music / Albums	13	8.7%
Music / Podcasts	5	3.3%
Apps	10	6.7%

Colors

color on a node paints its whole branch. [drill]="false" keeps the chart at one level — clicks still report segmentClick.

Team by role. Sunburst chart, Total 58: Engineering 65.5%, Design 12.1%, Sales 22.4%
Category	Value	Of total
Engineering	38	65.5%
Engineering / Frontend	14	24.1%
Engineering / Backend	18	31%
Engineering / Mobile	6	10.3%
Design	7	12.1%
Design / Product	5	8.6%
Design / Brand	2	3.4%
Sales	13	22.4%
Sales / Direct	9	15.5%
Sales / Partners	4	6.9%

Events

segmentClick reports the path, the value and the item of a segment; focusChange reports zooming in and out.

Sales by region. Sunburst chart, Total 41: North 43.9%, South 56.1%
Category	Value	Of total
North	18	43.9%
North / Oslo	12	29.3%
North / Bergen	6	14.6%
South	23	56.1%
South / Rome	15	36.6%
South / Naples	8	19.5%

Click a segment or the centre.

10 lines

<div class="wrap">  <tx-sunburst-chart    [data]="data"    [height]="300"    ariaLabel="Sales by region"    (segmentClick)="onSegment($event)"    (focusChange)="onFocus($event)"  />  <p class="log" aria-live="polite">{{ message() }}</p></div>

Loading and empty

loading keeps the size with a skeleton; empty data shows "No data".

No data

12 lines

<div class="wrap">  <div class="controls">    <button txButton label="Load data" variant="outlined" (click)="load()"></button>    <button txButton label="Clear" variant="text" (click)="data.set([])"></button>  </div>  <tx-sunburst-chart    [data]="data()"    [loading]="loading()"    [height]="260"    ariaLabel="Loaded hierarchy"  /></div>

Live

New data redraws the rings.

Shuffled hierarchy. Sunburst chart, Total 64: A 20.3%, B 46.9%, C 32.8%
Category	Value	Of total
A	13	20.3%
A / A1	4	6.3%
A / A2	9	14.1%
B	30	46.9%
B / B1	13	20.3%
B / B2	17	26.6%
C	21	32.8%

6 lines

<div class="wrap">  <div class="controls">    <button txButton label="Shuffle" variant="outlined" (click)="shuffle()"></button>  </div>  <tx-sunburst-chart [data]="data()" [height]="300" ariaLabel="Shuffled hierarchy" /></div>

Accessibility

Tab to the chart: ←/→ walk the segments of one parent, ↓ goes to the first child, ↑ to the parent, Enter zooms in and Escape zooms out. Every segment is announced with its path, value and share; screen readers also get a summary and a hidden table.

Disk usage. Sunburst chart, GB used 150: Photos 52%, Work 29.3%, Music 12%, Apps 6.7%
Category	Value	Of total
Photos	78	52%
Photos / 2024	33	22%
Photos / 2024 / Trips	18	12%
Photos / 2024 / Family	11	7.3%
Photos / 2024 / Other	4	2.7%
Photos / 2025	31	20.7%
Photos / 2025 / Trips	22	14.7%
Photos / 2025 / Family	9	6%
Photos / 2026	14	9.3%
Work	44	29.3%
Work / Projects	35	23.3%
Work / Projects / Design	12	8%
Work / Projects / Code	7	4.7%
Work / Projects / Video	16	10.7%
Work / Archive	9	6%
Music	18	12%
Music / Albums	13	8.7%
Music / Podcasts	5	3.3%
Apps	10	6.7%

Design tokens

dt sets the hole, the gaps, the corner radius, how much deeper rings fade, the labels and the centre of one chart.

Custom rings. Sunburst chart, Total 150: Photos 52%, Work 29.3%, Music 12%, Apps 6.7%
Category	Value	Of total
Photos	78	52%
Photos / 2024	33	22%
Photos / 2024 / Trips	18	12%
Photos / 2024 / Family	11	7.3%
Photos / 2024 / Other	4	2.7%
Photos / 2025	31	20.7%
Photos / 2025 / Trips	22	14.7%
Photos / 2025 / Family	9	6%
Photos / 2026	14	9.3%
Work	44	29.3%
Work / Projects	35	23.3%
Work / Projects / Design	12	8%
Work / Projects / Code	7	4.7%
Work / Projects / Video	16	10.7%
Work / Archive	9	6%
Music	18	12%
Music / Albums	13	8.7%
Music / Podcasts	5	3.3%
Apps	10	6.7%

Pass through

pt reaches the parts — segment, label, center, plot, tooltip and more.

Bold labels. Sunburst chart, Total 150: Photos 52%, Work 29.3%, Music 12%, Apps 6.7%
Category	Value	Of total
Photos	78	52%
Photos / 2024	33	22%
Photos / 2024 / Trips	18	12%
Photos / 2024 / Family	11	7.3%
Photos / 2024 / Other	4	2.7%
Photos / 2025	31	20.7%
Photos / 2025 / Trips	22	14.7%
Photos / 2025 / Family	9	6%
Photos / 2026	14	9.3%
Work	44	29.3%
Work / Projects	35	23.3%
Work / Projects / Design	12	8%
Work / Projects / Code	7	4.7%
Work / Projects / Video	16	10.7%
Work / Archive	9	6%
Music	18	12%
Music / Albums	13	8.7%
Music / Podcasts	5	3.3%
Apps	10	6.7%

Unstyled

unstyled removes the tectra styles: no gaps, no fade, no motion — the rings, the colours, zooming, the tooltip and the keyboard stay, ready for your own CSS.

Unstyled chart. Sunburst chart, Total 9: A 55.6%, B 44.4%
Category	Value	Of total
A	5	55.6%
A / A1	3	33.3%
A / A2	2	22.2%
B	4	44.4%