Charts

Radar Chart

Values of several series on axes spread around a centre — compare profiles, skills or ratings at a glance. 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

Each series is a filled polygon over the grid rings. Hover a slice of the chart: its axis lights up, every series gets a marker on it and the tooltip lists the values.

Skills of two candidates. Radar chart, 2 series, 6 values, from 40 to 90
Category	Candidate A	Candidate B
Frontend	90	60
Backend	55	85
Testing	70	75
Design	80	40
Communication	65	70
Planning	50	80

Circle

shape="circle" draws round grid rings — a good fit for many axes such as months. markers turns the value points off.

Rainy days by month. Radar chart, 2 series, 12 values, from 1 to 19
Category	North	South
Jan	18	9
Feb	15	8
Mar	14	7
Apr	12	6
May	11	4
Jun	10	2
Jul	9	1
Aug	11	1
Sep	13	3
Oct	16	6
Nov	18	8
Dec	19	10

Single

A single series has no legend; the tooltip still names it.

Page quality scores. Radar chart, 1 series, 5 values, from 64 to 96
Category	Score
Speed	72
Accessibility	96
Best practices	88
SEO	91
Stability	64

Scale

min, max and rings fix the scale — here a five-star rating with one ring per star. tooltipFormatter writes the values.

Ratings of three laptops. Radar chart, 3 series, 5 values, from 2.5 to 5
Category	Laptop 13"	Laptop 14"	Laptop 16"
Battery	4.5	4	3
Screen	4	4.5	5
Keyboard	3.5	4.5	4
Weight	5	4	2.5
Price	3	3.5	2.5

9 lines

<tx-radar-chart    [series]="series"    [categories]="criteria"    [min]="0"    [max]="5"    [rings]="5"    [tooltipFormatter]="format"    ariaLabel="Ratings of three laptops"  />

Legend

The legend on the side with legendVariant="stat": each series shows its average, and the value on the focused axis while you hover. A click hides a series; hovering an item fades the others.

Team results by area. Radar chart, 2 series, 5 values, from 61 to 97
Category	Team North	Team South
Delivery	82	70
Quality	74	88
Support	90	76
Docs	61	84
Uptime	97	92

Events

pointClick reports the clicked axis with the series nearest to the pointer; seriesToggle reports legend changes.

Survey answers. Radar chart, 2 series, 5 values, from 52 to 81
Category	This year	Last year
Onboarding	78	70
Search	64	58
Checkout	81	74
Support	72	75
Mobile	69	52

Click an axis or a legend item.

11 lines

<div class="wrap">  <tx-radar-chart    [series]="series"    [categories]="areas"    [height]="300"    ariaLabel="Survey answers"    (pointClick)="onPoint($event)"    (seriesToggle)="onToggle($event)"  />  <p class="log" aria-live="polite">{{ message() }}</p></div>

Loading and empty

loading keeps the size with a skeleton; empty series (or only null values) 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)="series.set([])"></button>  </div>  <tx-radar-chart    [series]="series()"    [categories]="axes"    [loading]="loading()"    [height]="280"    ariaLabel="Service health"  /></div>

Live

Changing series, shape or fill redraws in place — the polygons morph to their new shape.

Circle

Fill

Shuffled profile. Radar chart, 2 series, 6 values, from 30 to 99
Category	Before	After
Strength	30	49
Speed	53	72
Agility	76	95
Stamina	99	48
Focus	52	71
Balance	75	94

15 lines

<div class="wrap">  <div class="controls">    <button txButton label="Shuffle" variant="outlined" (click)="shuffle()"></button>    <tx-toggle-switch label="Circle" [(ngModel)]="circle" />    <tx-toggle-switch label="Fill" [(ngModel)]="fill" />  </div>  <tx-radar-chart    [series]="series()"    [categories]="axes"    [shape]="circle() ? 'circle' : 'polygon'"    [fill]="fill()"    [height]="320"    ariaLabel="Shuffled profile"  /></div>

Tab to the chart: ←/→ move between the axes, ↑/↓ between the series, Home / End jump to the first and last axis, Escape closes the tooltip. Each value is announced; screen readers also get a summary and a hidden data table.

Course feedback. Radar chart, 2 series, 5 values, from 3.6 to 4.6
Category	Spring	Autumn
Content	4.2	4.4
Pace	3.6	4.1
Exercises	4.5	4.3
Support	3.9	4.6
Tools	4.1	3.8

Design tokens

dt sets the line width, the fill, the points, the axis labels and the palette of one chart.

Flavour profile. Radar chart, 1 series, 5 values, from 2 to 7
Category	Flavour
Sweet	6
Sour	3
Bitter	7
Salty	2
Umami	5

14 lines

<tx-radar-chart    [series]="series"    [categories]="axes"    [dt]="{      radar: {        strokeWidth: '3',        fillOpacity: '0.32',        pointRadius: '0',        labelColor: 'var(--tx-text-primary)',      },      series: { color1: 'var(--tx-purple-500)' },    }"    ariaLabel="Flavour profile"  />

Pass through

pt reaches the parts — area, line, marker, ring, axisLine, axisLabel, grid, legend, plot, tooltip and more.

Plan and fact. Radar chart, 2 series, 5 values, from 32 to 72
Category	Plan	Fact
North	50	55
East	40	32
South	45	47
West	35	41
Online	60	72

9 lines

<tx-radar-chart    [series]="series"    [categories]="axes"    [pt]="{      line: { style: { 'stroke-dasharray': '5 4' } },      axisLabel: { style: { 'text-transform': 'uppercase', 'letter-spacing': '0.06em' } },    }"    ariaLabel="Plan and fact"  />

Unstyled

unstyled removes the tectra styles: no grid colours, no fonts, no motion — the geometry, the colours of the series, the tooltip and the keyboard stay, ready for your own CSS.

Category	North	South
Jan	18	9
Feb	15	8
Mar	14	7
Apr	12	6
May	11	4
Jun	10	2
Jul	9	1
Aug	11	1
Sep	13	3
Oct	16	6
Nov	18	8
Dec	19	10

Category	North	South
Jan	18	9
Feb	15	8
Mar	14	7
Apr	12	6
May	11	4
Jun	10	2
Jul	9	1
Aug	11	1
Sep	13	3
Oct	16	6
Nov	18	8
Dec	19	10

Category	North	South
Jan	18	9
Feb	15	8
Mar	14	7
Apr	12	6
May	11	4
Jun	10	2
Jul	9	1
Aug	11	1
Sep	13	3
Oct	16	6
Nov	18	8
Dec	19	10