A radial chart with a grid for React

PolarGrid sets gridType="circle", so the grid is circles. It sits behind one RadialBar with dataKey="visitors". This file doesn't set background on that bar, so there is no full-circle track behind each arc.

PolarGrid leaves radialLines at its default, which is on, so the spokes still render. Set radialLines={false} on that same PolarGrid when you want only the circles.

RadialBarChart sets innerRadius={30} and outerRadius={100}. The five browser rows share that band, and each row's visitors value sets how far its arc runs.

ChartTooltipContent sets hideLabel and nameKey="browser". hideLabel hides the title. nameKey looks up the row's browser field in config, so the row reads Chrome, Safari, Firefox, Edge, or Other. cursor={false} turns the hover cursor off.

Every chartData row sets fill to var(--color-chrome) and the same pattern for the other browsers. config maps those keys to var(--chart-1) through var(--chart-5). ChartContainer writes the --color- variables.

ChartContainer uses mx-auto aspect-square max-h-[250px] inside a w-full max-w-xl frame. That overrides the container's default 16:9 box.