shadcn.io is an independent project built on shadcn/ui
A round grid tinted with the desktop color, and the data shape filled in that color at half strength. Month names sit around the edge.
Use a tinted grid when the shape needs a soft background in the same color. Leave the grid plain if the tint fights the fill. A Table avoids the overlap. In React, Base UI turns the series color into a variable both the grid and the shape read. You pass the rows.
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 />} cursor={false} />
<PolarGrid
className="fill-(--color-desktop) opacity-20"
gridType="circle"
/>
<PolarAngleAxis dataKey="month" />
<Radar
dataKey="desktop"
fill="var(--color-desktop)"
fillOpacity={0.5}
/>
</RadarChart>
</ChartContainer>
</div>FAQ
How are the circular rings tinted?
PolarGrid sets gridType to circle and className to fill-(--color-desktop) opacity-20. The rings are circles, filled with the desktop color at 20% opacity.
How is the data shape filled?
Radar uses dataKey desktop, fill var(--color-desktop), and fillOpacity 0.5. config maps desktop to var(--chart-1) and the label Desktop, which is the --color-desktop both the grid and the shape read.
Where do the month names come from?
PolarAngleAxis sets dataKey to month, so the rim prints the stored names, January through June. Radar in this file has no dot.
What does the tooltip show?
ChartTooltip renders ChartTooltipContent with cursor set to false. The month stays as the title, and the row is named Desktop from config.
API Reference
Chart
Sets config={chartConfig}. The rest is on the Chart page.
