Radar Chart

import { Component } from '@angular/core';
import { WrRadarChart } from 'ngwr/charts/radar-chart';

@Component({ imports: [WrRadarChart] })
export class MyComponent {}

<wr-radar-chart
  [axes]="['Speed', 'Power', 'Range', 'Comfort', 'Price']"
  [series]="[
    { label: 'Model A', data: [80, 65, 70, 90, 55] },
    { label: 'Model B', data: [60, 85, 75, 60, 80] }
  ]"
  [max]="100"
/>

<!-- Fitted: 0 to a readable step above the data -->
<wr-radar-chart [axes]="axes" [series]="models" />

<!-- Fixed: a rating out of 5, one ring per point -->
<wr-radar-chart [axes]="skills" [series]="ratings" [max]="5" />

<wr-radar-chart variant="polar-area" [axes]="directions" [series]="wind" toggleableLegend />

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] },
];

<wr-radar-chart [axes]="axes" [series]="survey" [max]="100" />

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] },
];

<wr-radar-chart [axes]="axes" [series]="teams" [max]="100" toggleableLegend [(hiddenSeries)]="hidden" />

hidden = signal<readonly number[]>([]);

<wr-radar-chart [axes]="axes" [series]="models" [max]="100" ariaLabel="Two models compared" dataTable />

interface WrRadarSeries {
  label: string;
  data: readonly (number | null)[];
  color?: string;
}

type WrRadarVariant = 'polygon' | 'polar-area';