Recharts radar chart on the shadcn ChartContainer: multi-series polar areas with a polar grid, angle axis, adjustable fill opacity, optional legend, and a theme-aware tooltip. Config-driven colors via --chart tokens.
The import and the props worth knowing about, in one place.
import { RadarChart } from "@/components/beste/component/radar-chart";
<RadarChart
angleKey="metric"
config={{
desktop: { label: "Desktop", color: "var(--chart-1)" },
mobile: { label: "Mobile", color: "var(--chart-2)" },
}}
data={[
{ metric: "Speed", desktop: 186, mobile: 120 },
{ metric: "Comfort", desktop: 237, mobile: 190 },
]}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Hover the web | The tooltip reads every series on the nearest axis. |
|---|
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
data* | Array<Record<string, string | number>> | — | |
config* | ChartConfig | — | Series config keyed by data field: { desktop: { label, color } } |
angleKey* | string | — | Field placed around the polar angle axis |
fillOpacity | number | — | Fill opacity for each radar area (0 = outline only) |
showLegend | boolean | — | |
className | string | — |