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 },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
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":"Reliability","desktop":305,"mobile":200},{"metric":"Comfort","desktop":237,"mobile":190},{"metric":"Safety","desktop":273,"mobile":230},{"metric":"Efficiency","desktop":209,"mobile":160},{"metric":"Design","desktop":264,"mobile":220}]}
/>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 | — |
Recharts line chart on the shadcn ChartContainer: multi-series lines with configurable curve, optional dots, active-dot hover, grid, y-axis, legend, and a theme-aware tooltip. Config-driven colors via --chart tokens.
Recharts area chart on the shadcn ChartContainer: multi-series with per-series gradient fills, optional stacking, grid, y-axis, legend, and a theme-aware tooltip. Config-driven colors via --chart tokens.
Recharts bar chart on the shadcn ChartContainer: grouped or stacked multi-series bars with rounded corners, optional grid, y-axis, legend, and a dashed-indicator tooltip. Config-driven colors via --chart tokens.