A radial chart for React

RadialBarChart sets innerRadius={30} and outerRadius={110}. The five browser rows share that band. Each row's visitors value is how far that arc runs. Chrome is 275 and Other is 90.

RadialBar sets background and dataKey="visitors". background draws the full-circle track behind each arc, and the chart styles that sector with the muted fill. The colored part is the visitors value.

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

Each chartData row sets fill to var(--color-chrome) or the matching key. config maps those keys to var(--chart-1) through var(--chart-5), and ChartContainer writes the --color- variables. visitors in config is only the label Visitors.

Add a row to chartData with browser, visitors, and fill, and add a matching entry in config with a label and a color. RadialBar already maps dataKey="visitors" across the whole array. This file doesn't set startAngle or endAngle, so the track is a full circle.

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