shadcn.io is an independent project built on shadcn/ui
The same filled desktop shape, with a dot on each month, so the measured points stand out from the area between them.
Use dots when the vertices are the data and the fill is only the profile. Drop them if the outline is enough. For the values, use a Table. In React, Base UI does not mark the vertices. You turn the dots on, and you pass the months.
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} />
<PolarAngleAxis dataKey="month" />
<PolarGrid />
<Radar
dataKey="desktop"
dot={{
fillOpacity: 1,
r: 4,
}}
fill="var(--color-desktop)"
fillOpacity={0.6}
/>
</RadarChart>
</ChartContainer>
</div>FAQ
How do I show a dot on each radar point?
Set dot on Radar. This demo uses r of 4 and fillOpacity of 1, so each vertex is a solid dot. Radar leaves dot off unless you pass it.
How is the polygon colored?
fill is var(--color-desktop). ChartContainer writes that from the desktop entry in config, where label is Desktop and color is var(--chart-1). fillOpacity={0.6} keeps the PolarGrid rings visible through the shape.
Where do the month labels come from?
PolarAngleAxis uses dataKey="month". Each row of chartData is one spoke, January through June, and desktop on that row is the dot's value. Add a row and the polygon gains a corner.
What does the grid draw?
PolarGrid draws the concentric rings and the spokes. This demo doesn't pass grid props, so you get that default polygon grid. The rings are the scale behind each dot.
API Reference
Chart
Sets config={chartConfig}. The rest is on the Chart page.
