# Radar Chart
> Several series compared across the same axes, as polygons on a polar grid or as polar-area wedges.
Source: https://ngwr.dev/charts/radar-chart
Added in v15.1
## Installation
Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.
```typescript
import { Component } from '@angular/core';
import { WrRadarChart } from 'ngwr/charts/radar-chart';
@Component({ imports: [WrRadarChart] })
export class MyComponent {}
```
```scss
@use 'ngwr/charts/radar-chart';
```
## Basic
One value per axis per series. The first axis points up and the rest follow clockwise.
```angular-html
```
## Scale
With no `max` the scale runs from zero to a readable step above the data. A fixed `max` gets rings on a readable step that divides it: a rating out of 5 has one per point.
```angular-html
```
## Polar area
With `variant` set to `polar-area`, each axis gets a wedge per series. The area of a wedge is its value. A missing value is a missing wedge.
```angular-html
```
```angular-ts
directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
// Hours of wind from each direction. A wedge's area, not its radius, is the value.
wind: WrRadarSeries[] = [
{ label: 'Winter', data: [42, 30, 12, 8, 10, 18, 36, 48] },
{ label: 'Summer', data: [12, 16, 28, 34, 30, 22, 14, 10] },
];
```
## Missing values
A missing value, `null` or a non-finite number, breaks the outline at its axis. The series is drawn open and not filled, so no reading is invented.
```angular-html
```
```angular-ts
survey: WrRadarSeries[] = [
{ label: '2025', data: [62, 71, 58, 66, 74] },
// No Range figure for 2026: the outline breaks there and is not filled.
{ label: '2026', data: [70, 76, null, 72, 79] },
];
```
## Toggle series
`toggleableLegend` makes each legend row a button. A hidden series leaves the drawing, the tooltip and the data table.
```angular-html
```
```angular-ts
hidden = signal([]);
```
## Data table
`dataTable` adds a table only screen readers reach: a row per axis, a column per series shown. Nothing changes on screen.
```angular-html
```
## Accessibility
| Part | Behaviour |
| --- | --- |
| Drawing | One `role="img"`, named by `ariaLabel`. The polygons and wedges announce nothing. |
| Numbers | In the tooltip, which is pointer only, and in the table `dataTable` adds. |
| Series | Each has its own dash as well as its colour, so outlines differ without hue. |
| Axis names | Real text. A long name is cut with an ellipsis; the tooltip and the table carry it whole. |
| Keyboard | No tab stop, unless `toggleableLegend` makes the legend rows buttons. |
## API
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `axes` | The axes' names, clockwise from twelve o'clock. A series takes one value per axis, in this order. Three at least: with fewer the chart draws the grid and no series. | `readonly string[]` | `[]` |
| `series` | One polygon per series. A series with no `color` takes the next entry from the chart's palette, and each takes the next dash, the first one solid. | `readonly WrRadarSeries[]` | `[]` |
| `variant` | How the series are drawn. `'polygon'` joins each series' values into a polygon, one vertex per axis. `'polar-area'` gives each axis an equal-angle wedge per series whose AREA is the value — the radius grows with the square root of the value, so the ink a wedge paints is proportional to what it stands for — with the series overlaid. The legend, the toggle, the tooltip and the data table are the same in both. | `WrRadarVariant` | `'polygon'` |
| `ariaLabel` | Accessible name of the drawing. The shapes carry no text and the legend has the series names only, so this is where to say what the chart shows — or turn on `dataTable`. Falls back to `radarChart.label`, or to `radarChart.polarAreaLabel` in the polar-area variant, which is also the data table's caption. | `string \| null` | `null` |
| `max` | The value of the outer ring. `0` fits the scale to the series shown, on a readable step and including zero; a value above `0` fixes it, from zero at the centre — a score out of 100, a rating out of 5 — with its rings on a readable step that divides it (see `rings`). A value outside a fixed scale is drawn on its edge, and the tooltip and the data table still give its own figure. | `number` | `0` |
| `rings` | About how many rings the grid draws between the centre and the outer ring, each on a readable step — 1, 2, 2.5 or 5 times a power of ten. A fitted scale aims for this many and rounds its step up onto that ladder. A fixed `max` takes the step that divides it into the count nearest this one, the fewer on a tie, so a rating out of 5 gets a ring per point and a score out of 100 a ring per 25; only a `max` that no such step divides, such as 37, is cut into exactly this many equal rings. Whole numbers from 1 to 10. | `number` | `4` |
| `size` | The drawing's diameter in CSS pixels, at least 120. The axis names sit in a gutter round it, so the chart is wider than this by the gutter on either side; in a narrower container the drawing shrinks to fit. | `number` | `280` |
| `showGrid` | Show the rings, the spokes and the ring values. The axis names stay. | `boolean` | `true` |
| `showLegend` | Show the legend under the chart. | `boolean` | `true` |
| `toggleableLegend` | Make each legend row a toggle button that shows and hides its series, through `hiddenSeries`. A row is a `