Radar Chart
Several measures for one subject on a shared scale, useful for comparing two profiles at a glance.
Only when the axes share a scale
The shape only means something if every spoke is measured the same way: all scores out of 100, all percentages. Mixing units makes the enclosed area meaningless even though it still looks like a chart. Spoke order matters too, since rearranging them changes the shape without changing the data.
Comparing two profiles
The second shape is derived from the data, not switched on by the variant: any row carrying value2 gets one. That is why the single-series variants below are fed rows without it.
Grid treatments
The grid is either a polygon (straight edges joining the spokes) or a set of concentric circles. Everything else is whether the web lines show and whether the shape is filled.
defaultpolygon gridgrid-custompolygon, restyled gridgrid-filledpolygon, filled shapecircle-gridconcentric ringscircle-grid-no-linesrings, no spokescircle-grid-filledrings, filled shapeMarkers and labels
dotspoint markers on the shapedots-grid-nonemarkers, grid removedlines-onlyoutlines, no fill, two seriescustom-labelrestyled spoke labels, two seriesProps
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; value: number; value2?: number }[] | One spoke per entry. value2 draws a second shape for comparison. | |
| variant | 'default' | 'dots' | 'dots-grid-none' | 'lines-only' | 'circle-grid' | 'circle-grid-no-lines' | 'grid-custom' | 'grid-filled' | 'circle-grid-filled' | 'multiple' | 'custom-label' | 'default' | Grid and fill treatment. |
| seriesLabels | [string, string?] | Names for value and value2. | |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Preset diameter. |