Radar Chart
Multi-dimensional comparison chart. Each spoke represents a dimension; the filled polygon shows relative values across all dimensions. Ideal for scoring, capability mapping, and profile comparisons.
Examples
Multiple series
Circle grid
Props
data*
Record<string, string | number>[]
Array of objects — one per spoke. Must include the index key and one key per category.
index*
string
Key used as the spoke label.
categories*
string[]
Keys to render as radar series.
colors= palette
string[]
Override chart palette colours.
fillOpacity= 0.15
number
Opacity of the filled polygon (0–1).
gridType= 'polygon'
'polygon' | 'circle'
Shape of the background grid lines.
valueFormatter= —
(value: number) => string
Format values in the tooltip.
showLegend= auto
boolean
Show series legend. Auto-shown when categories.length > 1.
height= 320
number
Fixed height of the chart in px.
className= —
string
Extra class on the outer container.
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | Record<string, string | number>[] | — | Array of objects — one per spoke. Must include the index key and one key per category. |
| index* | string | — | Key used as the spoke label. |
| categories* | string[] | — | Keys to render as radar series. |
| colors | string[] | palette | Override chart palette colours. |
| fillOpacity | number | 0.15 | Opacity of the filled polygon (0–1). |
| gridType | 'polygon' | 'circle' | 'polygon' | Shape of the background grid lines. |
| valueFormatter | (value: number) => string | — | Format values in the tooltip. |
| showLegend | boolean | auto | Show series legend. Auto-shown when categories.length > 1. |
| height | number | 320 | Fixed height of the chart in px. |
| className | string | — | Extra class on the outer container. |