Radar chart components

Pass an array of flat objects to the data prop of the Recharts RadarChart. Each object holds one category key that labels the spoke (for example subject: "Mon") plus one numeric key per series (A, B, C). PolarAngleAxis reads the category via dataKey="subject", and each <Radar> reads one numeric key through its own dataKey.

Each series is a single <Radar> element inside the chart. Add one by adding another numeric key to every data object and rendering another <Radar dataKey="D" name="Series 4" />; remove one by deleting its <Radar>. The name prop is what appears in the legend and tooltip, so set it to the human-readable series title.

Colors come from Tailwind text utilities rather than hard-coded hex values. Each <Radar> sets stroke="currentColor" and fill="currentColor" and takes its color from a class such as text-utility-brand-600, text-utility-pink-500, or text-utility-sky-500 on className. Tune the fill translucency with fillOpacity (the example uses 0.2) and the outline weight with strokeWidth.

Yes. The chart passes our styled ChartTooltipContent into the Recharts tooltip as <Tooltip content={<ChartTooltipContent />} />. ChartTooltipContent accepts the standard Recharts tooltip props, including formatter and labelFormatter, so you can reformat values and labels without rewriting the markup. It lives in charts-base.tsx alongside ChartLegendContent and ChartActiveDot.

Render the Recharts <Legend> with our ChartLegendContent as its content: <Legend verticalAlign="bottom" align="center" layout="horizontal" content={ChartLegendContent} />. Placement is set on the <Legend> element, not on ChartLegendContent. Recharts forwards align and layout to the content component, and ChartLegendContent reads only align and layout to decide its stacking and justification, and adds reversed to flip the payload order plus className for extra styling.

Set the domain prop on PolarRadiusAxis, for example domain={[0, 1000]}, to pin the minimum and maximum of the rings instead of letting Recharts infer them. The same component takes angle to choose which spoke the tick labels sit on, axisLine={false} to hide the axis line, and a tick render function for fully custom tick labels.

Wrap the chart in the Recharts <ResponsiveContainer> with width="100%" and a fixed height, then set the chart's cx, cy, and outerRadius in percentages ("50%", "50%", and "80%" in our example) so the plot scales with its container.