Charts

Pie Chart

A donut or pie for parts of a whole: the total in the centre, the hovered segment's value, percent labels on the segments and a legend that can list values and shares. Drawn as SVG, 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).

Features14

API

Theming

Basic

Pass pieData with series (values) and labels. Hover a segment: it moves out, its value and name appear in the centre, and the tooltip points at it from the outside.

Visits by source. Donut chart, 1 series, 5 values, total 10,000
Category	Value	Share
Search	4,200	42%
Direct	2,600	26%
Social	1,800	18%
Email	950	9.5%
Referral	450	4.5%

Legend variants

legendVariant: dot (the default), line, pill (tinted chips) or stat — the value of each segment in large type with its share under it.

Legend variants. Donut chart, 1 series, 4 values, total 90
Category	Value	Share
Salaries	38	42.2%
Infrastructure	24	26.7%
Marketing	16	17.8%
Office	12	13.3%

16 lines

<div class="wrap">  <tx-select    class="control"    ariaLabel="Legend variant"    [options]="variants"    [(ngModel)]="variant"  />  <tx-pie-chart    [pieData]="budget"    [chartWidth]="440"    [chartHeight]="360"    totalLabel="Budget"    [legendVariant]="variant()"    ariaLabel="Legend variants"  /></div>

Pie

donutSize="0%" fills the hole — a classic pie. The percent labels sit in the middle of each slice; slices under 10° get none.

Budget split. Pie chart, 1 series, 5 values, total 100
Category	Value	Share
Salaries	38	38%
Infrastructure	24	24%
Marketing	16	16%
Office	12	12%
Other	10	10%

Ring

donutSize sets the hole ('65%' by default), segmentGap the card-coloured gap between segments in pixels and segmentRadius the rounding of their corners — large on a thin ring for soft capsule ends, 0 for sharp cuts. The rounding shrinks by itself where a segment is too narrow for it.

Hosts by status, thin ring. Donut chart, 1 series, 3 values, total 75
Category	Value	Share
Healthy	62	82.7%
Degraded	9	12%
Down	4	5.3%

Hosts by status, thick ring. Donut chart, 1 series, 3 values, total 75
Category	Value	Share
Healthy	62	82.7%
Degraded	9	12%
Down	4	5.3%

26 lines

<div class="row">  <tx-pie-chart    [pieData]="status"    [chartWidth]="200"    [chartHeight]="200"    [showLegend]="false"    [showDataLabels]="false"    donutSize="82%"    [segmentGap]="4"    [segmentRadius]="12"    totalLabel="Hosts"    ariaLabel="Hosts by status, thin ring"  />  <tx-pie-chart    [pieData]="status"    [chartWidth]="200"    [chartHeight]="200"    [showLegend]="false"    [showDataLabels]="false"    donutSize="45%"    [segmentGap]="0"    [segmentRadius]="0"    totalLabel="Hosts"    ariaLabel="Hosts by status, thick ring"  /></div>

Half donut

startAngle and endAngle (degrees, 0 at the top, clockwise) draw a part of the circle — -90 to 90 is a half donut that fits a wide, low card.

Votes by answer. Donut chart, 1 series, 3 values, total 800
Category	Value	Share
Yes	412	51.5%
No	268	33.5%
Not sure	120	15%

9 lines

<tx-pie-chart    [pieData]="votes"    [startAngle]="-90"    [endAngle]="90"    [chartWidth]="320"    [chartHeight]="240"    totalLabel="Votes"    ariaLabel="Votes by answer"  />

Legend values

legendValues lists the value and the share of each segment; legendPosition="right" puts the legend beside the chart. Items still toggle their segment.

Budget split. Donut chart, 1 series, 5 values, total 100
Category	Value	Share
Salaries	38	38%
Infrastructure	24	24%
Marketing	16	16%
Office	12	12%
Other	10	10%

9 lines

<tx-pie-chart    [pieData]="budget"    legendValues    legendPosition="right"    [chartWidth]="440"    [chartHeight]="220"    totalLabel="Total, %"    ariaLabel="Budget split"  />

Own legend

For a small donut next to your own list, turn the legend off and build the rows with the txPieLegend pipe (or pieLegend()): it returns label, value, percent and the same color the chart uses.

Articles by tag. Donut chart, 1 series, 5 values, total 124
Category	Value	Share
Angular	48	38.7%
Design	31	25%
Accessibility	22	17.7%
Performance	14	11.3%
Testing	9	7.3%

Angular48

39%

Design31

25%

Accessibility22

18%

Performance14

11%

Testing9

23 lines

<div class="card">  <tx-pie-chart    [pieData]="tags"    [chartWidth]="180"    [chartHeight]="180"    [showLegend]="false"    [showDataLabels]="false"    totalLabel="Tags"    donutSize="72%"    [segmentGap]="1"    ariaLabel="Articles by tag"  />  <div class="rows" role="list" aria-label="Articles by tag">    @for (item of tags | txPieLegend; track item.label) {      <div class="row" role="listitem">        <span class="swatch" [style.background]="item.color"></span>        <span class="name">{{ item.label }}</span>        <span class="count">{{ item.value }}</span>        <tx-tag severity="secondary" [value]="(item.percent | number: '1.0-0') + '%'" />      </div>    }  </div></div>

Center

<ng-template txPieCenter let-center> draws the middle of the donut. The context has the hovered segment (label, value, color, hovered) or the total.

Storage used. Donut chart, 1 series, 4 values, total 364
Category	Value	Share
Video	184	50.5%
Photos	96	26.4%
Documents	61	16.8%
Apps	23	6.3%

15 lines

<tx-pie-chart  [pieData]="storage"  [chartWidth]="260"  [chartHeight]="320"  [showDataLabels]="false"  donutSize="70%"  ariaLabel="Storage used">  <ng-template txPieCenter let-center>    <div class="center">      <strong>{{ center.hovered ? center.value + ' GB' : center.total + ' GB' }}</strong>      <span>{{ center.hovered ? center.label : 'of 512 GB used' }}</span>    </div>  </ng-template></tx-pie-chart>

Total formatter

totalLabel keeps the total in the centre; totalFormatter formats it and the hovered value, tooltipFormatter formats the tooltip.

Spending by category. Donut chart, 1 series, 4 values, total 2,831.5
Category	Value	Share
Rent	1,240.5	43.8%
Food	860.25	30.4%
Transport	420	14.8%
Fun	310.75	11%

9 lines

<tx-pie-chart    [pieData]="spend"    [chartWidth]="260"    [chartHeight]="320"    totalLabel="This month"    [totalFormatter]="money"    [tooltipFormatter]="tooltip"    ariaLabel="Spending by category"  />

Live

New pieData morphs the segments to their new angles; a legend item hides its segment and the rest close the gap. segmentClick and segmentToggle report what the user did.

Hours by activity. Donut chart, 1 series, 4 values, total 33
Category	Value	Share
Coding	14	42.4%
Meetings	9	27.3%
Review	6	18.2%
Learning	4	12.1%

Click a segment or a legend item.

19 lines

<div class="wrap">  <button    class="action"    txButton    label="Next week"    variant="outlined"    (click)="next()"  ></button>  <tx-pie-chart    [pieData]="data()"    [chartWidth]="260"    [chartHeight]="320"    totalLabel="Hours"    ariaLabel="Hours by activity"    (segmentClick)="onClick($event)"    (segmentToggle)="onToggle($event)"  />  <p class="log" aria-live="polite">{{ message() }}</p></div>

Loading and empty

loading shows a skeleton of the chart's size; no values, or only zeros, show "No data".

No data

13 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(empty)"></button>  </div>  <tx-pie-chart    [pieData]="data()"    [loading]="loading()"    [chartWidth]="240"    [chartHeight]="280"    ariaLabel="Plans"  /></div>

Accessibility

Tab to the chart and use the arrow keys to walk the segments (Home / End to the ends, Escape to leave); each is announced with its value and share, and the tooltip follows. A summary and a hidden table with values and shares are there for screen readers.

Visitors by browser. Donut chart, 1 series, 4 values, total 100
Category	Value	Share
Chrome	64	64%
Safari	19	19%
Firefox	11	11%
Edge	6	6%

Design tokens

dt sets the palette, the segment gap colour, the data labels and the centre texts of one chart.

Budget split. Donut chart, 1 series, 5 values, total 100
Category	Value	Share
Salaries	38	38%
Infrastructure	24	24%
Marketing	16	16%
Office	12	12%
Other	10	10%

17 lines

<tx-pie-chart  [pieData]="budget"  [chartWidth]="260"  [chartHeight]="320"  totalLabel="Budget"  [dt]="{    series: {      color1: 'var(--tx-primary-700)',      color2: 'var(--tx-sky-400)',      color3: 'var(--tx-green-400)',      color4: 'var(--tx-amber-400)',      color5: 'var(--tx-red-400)',    },    pie: { valueFontWeight: '700', labelFontSize: '11px' },  }"  ariaLabel="Budget split"/>

Pass through

pt reaches the parts: segment, dataLabel, center, legend, legendItem, plot, tooltip and more.