shadcn.io is an independent project built on shadcn/ui
The grid is circles, not the default polygon, and a dot sits on each month of the filled desktop shape.
Use circular rings when distance from the center should be easy to compare. A polygon grid follows the number of months instead. A Table is better for the exact values. In React, Base UI does not switch the grid to circles. You set the grid type.
Installation
Anatomy
Usage
<div className="w-full max-w-xl rounded-md border bg-background p-4">
<ChartContainer
className="mx-auto aspect-square max-h-[250px]"
config={chartConfig}
>
<RadarChart data={chartData}>
<ChartTooltip
content={<ChartTooltipContent hideLabel />}
cursor={false}
/>
<PolarGrid gridType="circle" />
<PolarAngleAxis dataKey="month" />
<Radar
dataKey="desktop"
dot={{
fillOpacity: 1,
r: 4,
}}
fill="var(--color-desktop)"
fillOpacity={0.6}
/>
</RadarChart>
</ChartContainer>
</div>FAQ
How does the grid become circles?
PolarGrid sets gridType to circle, so the rings are circles. The spokes stay, because radialLines is still at its default.
How are the dots on each point drawn?
Radar sets dot to { r: 4, fillOpacity: 1 }. The series uses dataKey desktop, fill var(--color-desktop), and fillOpacity 0.6.
Where do the month names come from?
PolarAngleAxis sets dataKey to month, so the rim prints the full month from each row. There is no tick formatter in this file.
Where does the series color come from?
config maps desktop to var(--chart-1) and the label Desktop. ChartContainer writes --color-desktop for the Radar fill.
API Reference
Chart
Sets config={chartConfig} and hideLabel. The rest is on the Chart page.
