shadcn.io is an independent project built on shadcn/ui
The grid is round rings only. Spokes are off. The desktop shape is filled, and a dot marks each month.
Use it when the overall profile matters more than reading each axis. Add the spokes back if a month needs a line to the center. For the values, use a Table. In React, Base UI does not hide the spokes. You turn them off, and you pass the data.
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" radialLines={false} />
<PolarAngleAxis dataKey="month" />
<Radar
dataKey="desktop"
dot={{
fillOpacity: 1,
r: 4,
}}
fill="var(--color-desktop)"
fillOpacity={0.6}
/>
</RadarChart>
</ChartContainer>
</div>FAQ
How is the grid drawn as circles?
PolarGrid sets gridType to circle and radialLines to false. The rings are circles, and the spokes from the center are off.
How are the dots on the shape drawn?
Radar sets dot to { r: 4, fillOpacity: 1 }. The series uses dataKey desktop, fill var(--color-desktop), and fillOpacity 0.6. The dot is opaque. The polygon fill is 0.6.
Where do the month names come from?
PolarAngleAxis sets dataKey to month, so the rim prints January through June. There is no tick formatter in this file.
Where does the fill color come from?
config maps desktop to var(--chart-1) and the label Desktop. ChartContainer writes --color-desktop, which Radar uses for fill.
API Reference
Chart
Sets config={chartConfig} and hideLabel. The rest is on the Chart page.
