RadarChart

Basic

POUR principle scores

Radar chart, 4 points. Perceivable to Robust. Values from 65 to 90.

Show data table

import { RadarChart } from '@eekodigital/raster';

<RadarChart
  axes={['Perceivable', 'Operable', 'Understandable', 'Robust']}
  series={[{ name: 'Current', data: [80, 65, 90, 70] }]}
  title="POUR principle scores"
/>

Multi-series comparison

Compare current state against a target or another audit.

Current vs target POUR scores

Radar chart, 2 series, 8 points. Perceivable to Robust. Values from 65 to 100.

CurrentTarget

Show data table

<RadarChart
  axes={['Perceivable', 'Operable', 'Understandable', 'Robust']}
  series={[
    { name: 'Current', data: [80, 65, 90, 70], color: 'var(--demo-accent)' },
    { name: 'Target', data: [100, 100, 100, 100], color: 'var(--demo-good)' },
  ]}
  max={100}
  title="Current vs target"
/>

Accessibility

• A role="figure" named by the visible title and described by a generated summary (chart type, series and point counts, range).
• The SVG is a role="group" with aria-roledescription="chart"; no graphics-* roles.
• Each series is a role="group"; each point is labelled {series}, {axis}: {value}, 2 of 5. With onSelect, selectedIndex or a click handler, marks are role="button" with aria-pressed; otherwise they’re static role="img".
• Points use a different marker shape per series, and lines a different dash pattern in forced-colours mode.
• A visible Show data table button (aria-expanded) reveals a real table captioned Data for {title}, with th scope headers and values run through formatValue.
• Escape (inside the chart only) clears the selection and announces it in a polite live region; it doesn’t close a surrounding dialog.
• Animations stop under prefers-reduced-motion. In forced-colours mode marks use system colours, told apart by dash pattern and marker shape.

Key	Action
← / →	Previous / next axis (wraps)
Home / End	First / last axis
↑ / ↓	Previous / next series
Tab	Leave the chart
Enter / Space	Toggle selection (interactive marks)
Escape	Hide the tooltip and clear selection

See the Accessibility guide for the shared structure, the labels prop and screen-reader testing.

Props

Prop	Type	Default	Description
axes	string[]	—	Required. Axis names.
series	RadarSeries[]	—	Required. { name, data, color? }.
max	number	data max	Value at the rim.
levels	number	4	Grid rings.
size	number	—	Fixed diameter in px. Omit to fill the container’s width (square).
formatValue	(value: number) => string	Intl.NumberFormat	Formats values in ticks, marks and the table. Defaults to Intl.NumberFormat(labels.locale).
onPointClick	(series, axis, value) => void	—	Makes points buttons.
selectedIndex	{ series, point } | null	—	Controlled selection.
onSelect	(index | null) => void	—	Makes points buttons.
title	string	—	Required. Visible title: names the figure and captions the data table.
hideTitle	boolean	false	Hide the title visually. It still names the chart for assistive technology.
labels	Partial<ChartLabels>	English	Generated strings and the number locale. See Accessibility.
dataTable	“disclosure” | “visually-hidden”	“disclosure”	How the data table is offered.
exportRef	Ref<ChartExportHandle>	—	SVG/PNG export. See Exporting charts.
className	string	—	Class on the figure.