Charts
RadarChart
A profile across several named dimensions.
When to reach for it
Recognising a silhouette. The area a radar encloses depends on the order its spokes happen to be in, so it is the wrong chart for comparing magnitudes.
Examples
default
| skill | Current |
|---|---|
| Design | 86 |
| Research | 64 |
| Writing | 72 |
| Delivery | 91 |
| Review | 58 |
| Support | 77 |
variant and grid
| skill | Current | Target |
|---|---|---|
| Design | 86 | 95 |
| Research | 64 | 80 |
| Writing | 72 | 78 |
| Delivery | 91 | 88 |
| Review | 58 | 75 |
| Support | 77 | 70 |
loading
Notes
A profile across several named dimensions — the shape for "what is this thing strong and weak at".
It reads a SHAPE, not a set of values: the area a radar encloses depends on the order the spokes happen to be in, so it is the wrong chart for comparing magnitudes and the right one for recognising a silhouette. Two or three series at most.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | The composed parts — axes, grid, tooltip, legend, and the marks themselves. | |
| configrequired | TConfig & ValidateKeys<TData, TConfig> | — | |
| datarequired | TData[] | The rows the chart draws. One entry per point, bar or category. | |
| titlerequired | string | What the chart shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed. | |
| angleDataKey | keyof TData & string | The row field naming each spoke. Used by the table view. | |
| chartProps | ComponentProps<typeof RechartsRadarChart> | Escape hatch onto the raw Recharts chart element. | |
| className | string | Merged onto the figure, last, so a call site can size or space it. | |
| defaultSelectedDataKey | string | null | null | The series lit on first render. Selection dims every other series. |
| description | ReactNode | A line under the title — the unit, the window, the caveat. | |
| hideDataTable | boolean | false | Drops the hidden table view. Only correct when the page prints the data itself. |
| isLoading | boolean | false | Swaps the marks for an animated skeleton, keeping the measured height so the page does not jump when the data lands. |
| loadingPoints | number | How many points the skeleton draws. | |
| onSelectionChange | (selectedDataKey: string | null) => void | Fires when the selection changes, and with null when it is cleared. | |
| showTitle | boolean | Prints the title above the plot instead of hiding it from sight. |
Types
export type RadarVariant = 'filled' | 'lines'Accessibility
- title is required; the rows are also rendered as a visually hidden table.
- Two or three series at most: filled polygons overlap, and judging areas through two layers of translucency is what a radar is worst at. Past that, variant="lines".