Radar Chart for Angular

import { AuiRadarChart } from '@absoluteui/angular/radar-chart';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Radar Chart page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { radarChart: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiRadarChart } from '@absoluteui/angular/radar-chart';
import type { ChartSeries } from '@absoluteui/components/radar-chart';

@Component({
  selector: 'app-skills',
  imports: [AuiRadarChart],
  template: `<aui-radar-chart label="Skills" [axes]="axes" [series]="series"></aui-radar-chart>`,
})
export class SkillsComponent {
  readonly axes = ['Speed', 'Power', 'Range', 'Armor'];
  readonly series: ChartSeries[] = [{ id: 'a', label: 'Alpha', values: [3, 5, 2, 4] }, { id: 'b', label: 'Beta', values: [4, 2, 5, 1] }];
}

<aui-radar-chart>

Class AuiRadarChart; template reference #ref="auiRadarChart".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Chart title: visible text and the accessible name of the plot (aria-labelledby); also the data table caption.
hideLabel	boolean	false	Visually hide the title; it stays the accessible name.
description	string		Visible description below the title, also referenced by aria-describedby (text only).
summary	string		Replaces the generated accessible summary (axes, scale, each series’ highest and lowest axis, hidden series).
valueFormat	NumberFormatOptions		Number format for values in tooltips, vertex labels, the data table, the summary, and ring ticks (ticks use fixed fraction digits).
formatValue	(value: number) => string		Custom value text; overrides valueFormat everywhere except ring ticks.
axes	readonly string[]		Required. Axis names, clockwise from the top. At least three.
series	readonly ChartSeries[]		Required. Series: { id, label, values: (number | null)[], color?: 1-8 } with exactly one value per axis. null, NaN, and infinities are drawn at the center and read “No value”.
valueAxis	ValueAxisInput		Shared radial scale { min?, max?, tickCount? (2-20, default 4 rings) }. min defaults to 0, or the data minimum when negative; max to the data maximum; nice-rounded unless min or max is fixed. label and includeZero are validated but not used by the radar chart.
legend	ChartLegendMode	'auto'	auto: legend of toggle buttons when there is more than one series.
dataTable	ChartTableMode	'toggle'	Data table fallback (one row per axis, one column per series): behind a Show data table button (built on first open), always visible, visually hidden (screen readers only), or none.
tooltip	boolean	true	Tooltip on pointer hover and keyboard focus.
patterns	boolean	false	Dash patterns on the polygon outlines so series never differ by color alone (always on in forced colors); marker shapes differ regardless.
height	number	'300'	Plot height in CSS px (integer 120-2000); the width follows the container.
fill	boolean	true	Fill each polygon with a translucent (12%) series color; the outline and vertices carry the data.
locale	string	'en-US'	Number and message locale.
direction	Direction	'ltr'	Axes keep clockwise order in RTL (like pie charts); rtl swaps ArrowLeft/ArrowRight so forward follows the reading direction.

Two-way bindings

Model	Type	Change output	Description
[(hiddenSeries)]	readonly string[]	(hiddenSeriesChange)	Ids of series hidden initially; update() replaces the hidden set.

Outputs

Output	Payload	Description
(seriesToggled)	ChartSeriesToggleDetail	The user toggled a legend entry (pointer or keyboard). Not emitted for update() or setSeriesVisible(). Re-emits aui-series-toggle.

Methods

Call them through a viewChild query or a template reference.

Method	Description
setSeriesVisible(id: string, visible: boolean): void	Show or hide a series programmatically; emits no event.