Radar Chart

Compares a few items across several measures at once, one spoke per measure from a shared zero.

Beta

Web

iOS

Android

@advui/charts

Source

Two shapes

Preview

Code

Coverage by sectorShare of people in need reached, 2026

Kachin

Rakhine

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/charts

npm

npm install @advui/charts

Usage

import { RadarChart } from '@advui/charts'

<RadarChart
  title="Coverage by sector"
  data={[{ sector: 'Health', kachin: 82 }, { sector: 'WASH', kachin: 71 }, { sector: 'Food', kachin: 74 }]}
  index="sector"
  series={[{ key: 'kachin', label: 'Kachin' }]}
  max={100}
/>

Examples

Round grid

Preview

Code

Team skillsAverage self-rating out of 5

API reference

RadarChart

Prop	Type	Default	Description
`title` required	`string`	—	Names the chart: its heading and accessible name.
`description`	`string`	—	Muted line under the title (units, period).
`data` required	`T[]`	—	One object per spoke, three or more. Its type `T` (an interface works) is inferred, and `index` and `series` must name its fields.
`index` required	`keyof T & string`	—	Field holding each spoke’s name.
`indexLabel`	`string`	`index`	Heading of the spoke column in the table view.
`series` required	`{ key: keyof T & string; label: string }[]`	—	Numeric fields to draw, one shape each. Colors follow this order (`chart1`…`chart8`); more than three shapes get hard to read. A missing value leaves its spoke out of that shape.
`max`	`number`	—	The value at the edge, such as 100 for percentages. By default the largest value, rounded up. Negative values sit at the center and larger ones at the edge.
`grid`	`'polygon' \| 'circle'`	`'polygon'`	Shape of the rings behind the data.
`valueFormatter`	`(value: number) => string`	—	Formats tooltip and table values. Ring labels are compact (1.2K).
`height`	`number`	`300`	Pixels, including the spoke labels.
`width`	`number`	—	Fixed width. By default it fills its container.
`surface`	`ColorTokens`	`'background'`	The color behind the chart, for the ring around markers. Use `card` inside a Card.
`labels`	`Partial<ChartLabels>`	—	"Show table", "Hide table" and the keyboard hint, for translation.

Accessibility

The chart is a figure named by its title. The plot is one focusable image whose name gives the title, description and a hint; the arrow keys (Home / End too) step through the spokes clockwise from the top, and a polite live region reads every series’ value there.
Every chart has a table view ("Show table") with the same values, so nothing depends on seeing colors or hovering.
Identity never relies on color alone: two or more series get a legend, and the tooltip names each value.
Colors come from the chart1…chart8 theme keys, a palette checked for color-blind separation in light and dark mode.

Keyboard interactions
Key	Action
`Tab`	Focuses the plot, then the table button.
`Arrow keys / Home / End`	Move between spokes and read them.
`Escape`	Hides the tooltip.

Responsive behavior

The web fits the smaller of the width and height, leaving room for the spoke labels; labels longer than 96px are cut.

Platform notes

Web

SVG in the page. Hover near a spoke to show its tooltip; the arrow keys work once the plot has focus.

iOS

Drawn with react-native-svg. Tap near a spoke to show its tooltip. VoiceOver and TalkBack read the title and description, without the arrow-key hint; Show table lists every value.