RadarChart
Composable polar primitives for Recharts radar charts.
Quick Preview
Listing scorecard
Ikate duplex · scored 0–100
Usage
<RadarChart config={config} data={data}>
<RadarChartGrid />
<RadarChartAngleAxis dataKey="criterion" />
<ChartTooltip content={<ChartTooltipContent />} />
<RadarChartSeries dataKey="score" name="Score" />
</RadarChart>Unlike bar-chart and line-chart (which export layout hooks to spread onto raw
Recharts elements), the radar chart ships composable wrappers: each primitive
bakes in the giddaa defaults and forwards every Recharts prop, so you override
in place or swap in the raw Recharts element when you outgrow a wrapper. Frame
it with ChartCard/ChartHeader and reuse the shared ChartTooltip and
ChartLegend overlays from chart.
Examples
Default RadarChart
A single series inside the shared chart frame. RadarChart owns the responsive
plot box and size-scaled type; the grid, axis, and series compose as children.
Listing scorecard
Ikate duplex · scored 0–100
Multiple Series
Give each RadarChartSeries its own color (assigned in RADAR_CHART_PALETTE
order, never cycled — the palette maps to the theme-aware chart-1…chart-3
tokens) and add the shared legend so identity is never color-alone.
Neighbourhood comparison
Average listing scores · 0–100
Customizing the Primitives
Every wrapper forwards its Recharts props: switch the grid to circles, reveal
the value scale with RadarChartValueAxis, pin the domain, or restyle a
series in place.
Customized radar
Circular grid, visible value scale, no dots
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
RadarChart config | ChartConfig | {} | Series labels/icons for the shared tooltip and legend. |
RadarChart data | object[] | - | One row per category (angle). |
RadarChart size | "sm" | "md" | "lg" | inherited | Plot height and mark/type scale, provided to children. |
RadarChartAngleAxis dataKey | string | - | Field holding the category label. |
RadarChartSeries dataKey | string | - | Field holding the series value. |
RadarChartSeries color | CSS color | chart-1 token | Outline, 15% wash, and dot colour in one prop. |
RadarChartValueAxis domain | Recharts domain | auto | Pin the value scale, e.g. [0, 100]. |
className | string | - | Local layout or spacing overrides. |
| native/root props | Recharts component props | - | Passed through to the wrapped Recharts primitive. |
Accessibility
- Keep
accessibilityLayeron (the default) so the plot is keyboard-navigable and screen-reader labelled. - Add
ChartLegendwhenever more than one series renders; a single series is named by the card title. - Do not communicate state with color alone; include text, icons, or helper copy.
- Radar values are read comparatively — include
RadarChartValueAxisor precise tooltips when exact figures matter.