A radar chart with dots for React

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.

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.

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.

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.

ChartTooltip renders ChartTooltipContent and sets cursor={false}, which turns the hover cursor off. The title is the month under the pointer, and the row name is Desktop from config.

ChartContainer sets mx-auto aspect-square max-h-[250px] inside a w-full max-w-xl frame. The container defaults to a 16:9 box, so the square classes are what hold this plot even.