Charts

Radial Bar

Progress of one or several items as concentric rings over a track — goals, quotas, completion. 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).

Features12

API

Theming

Basic

One ring per item, from the outside in, each filled up to its share of max (100). The centre shows the average under totalLabel; hover a ring to see its own share.

Sprint progress by stage. Radial bar chart, 1 series, 4 values: Design 92%, Build 68%, Review 45%, Release 20%
Category	Value	Share
Design	92	92%
Build	68	68%
Review	45	45%
Release	20	20%

Single

A single item fills one ring and always shows its share in the centre. Its own max sets the full ring; hole widens the centre.

Storage used. Radial bar chart, 1 series, 1 value: Storage used 64%
Category	Value	Share
Storage used	640	64%

Horseshoe

startAngle and endAngle turn the rings into any arc — here a horseshoe open at the bottom. The chart fits the arc into its box.

Quarter goals. Radial bar chart, 1 series, 3 values: Revenue 84%, New clients 61%, Retention 93%
Category	Value	Share
Revenue	84	84%
New clients	61	61%
Retention	93	93%

Center

centerValue="value" puts the value instead of the share in the centre, formatted by valueFormat. Each item has its own max; legendValues adds the value and the share to the legend.

Steps towards the daily goal. Radial bar chart, 1 series, 3 values: Steps 74.2%, Active minutes 63.3%, Floors 90%
Category	Value	Share
Steps	7.4K	74.2%
Active minutes	38	63.3%
Floors	9	90%

Legend

The stat legend shows the values in large type with the share under them and replaces the tooltip. A click on a legend item hides its ring.

Plan completion by team. Radial bar chart, 1 series, 3 values: Platform 76%, Mobile 58%, Web 89%
Category	Value	Share
Platform	76	76%
Mobile	58	58%
Web	89	89%

Events

barClick reports the clicked ring with its value and share; barToggle reports legend changes.

Release checklist. Radial bar chart, 1 series, 3 values: Tests 96%, Docs 70%, Translations 35%
Category	Value	Share
Tests	96	96%
Docs	70	70%
Translations	35	35%

Click a ring or a legend item.

10 lines

<div class="wrap">  <tx-radial-bar    [items]="items"    [height]="260"    ariaLabel="Release checklist"    (barClick)="onBar($event)"    (barToggle)="onToggle($event)"  />  <p class="log" aria-live="polite">{{ message() }}</p></div>

Loading and empty

loading keeps the size with a skeleton; empty items (or only null values) show "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)="items.set([])"></button>  </div>  <tx-radial-bar    [items]="items()"    [loading]="loading()"    [height]="240"    ariaLabel="Upload progress"  /></div>

Live

New items redraw in place — every ring slides to its new length and the centre follows.

Daily goals. Radial bar chart, 1 series, 3 values: Move 15%, Exercise 44%, Stand 76%
Category	Value	Share
Move	15	15%
Exercise	44	44%
Stand	76	76%

11 lines

<div class="wrap">  <div class="controls">    <button txButton label="Next day" variant="outlined" (click)="next()"></button>  </div>  <tx-radial-bar    [items]="items()"    totalLabel="Average"    [height]="280"    ariaLabel="Daily goals"  /></div>

Tab to the chart: the arrow keys walk the rings, Home / End jump to the outer and inner ring, Escape clears the focus. Each ring is announced with its value and share; screen readers also get a summary and a hidden data table.

Course completion. Radial bar chart, 1 series, 3 values: Videos 80%, Quizzes 55%, Project 30%
Category	Value	Share
Videos	80	80%
Quizzes	55	55%
Project	30	30%

Design tokens

dt sets the ring thickness (share of each slot), the track colour, the centre text and the palette of one chart.

Tasks done and open. Radial bar chart, 1 series, 2 values: Done 72%, In review 18%
Category	Value	Share
Done	72	72%
In review	18	18%

8 lines

<tx-radial-bar    [items]="items"    [dt]="{      radialBar: { thickness: '0.9', trackColor: 'var(--tx-surface-200)' },      series: { color1: 'var(--tx-green-500)', color2: 'var(--tx-orange-400)' },    }"    ariaLabel="Tasks done and open"  />

Pass through

pt reaches the parts — track, bar, center, legend, plot, tooltip and more. Here the track is dotted.

Budget used. Radial bar chart, 1 series, 2 values: Marketing 64%, Hiring 41%
Category	Value	Share
Marketing	64	64%
Hiring	41	41%

Unstyled

unstyled removes the tectra styles: no tokens, no motion — the rings, the round ends, the tooltip and the keyboard stay, ready for your own CSS.