shadcn.io is an independent project built on shadcn/ui
One slice per browser, sized by visitors and colored from the chart config. The tooltip names the browser and its count. There is no legend and no label on the slices.
Use a pie for a handful of parts of a whole. Past that, bars or a Table are easier to compare. In React, Ark UI maps each slice color to a variable. The counts are the rows you pass.
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}
>
<PieChart>
<ChartTooltip content={renderTooltipContent} cursor={false} />
<Pie data={chartData} dataKey="visitors" nameKey="browser" />
</PieChart>
</ChartContainer>
</div>FAQ
How is each slice built?
Pie sets data={chartData}, dataKey="visitors", and nameKey="browser". visitors is the slice size, from Chrome at 275 to Other at 90. nameKey is the field the tooltip uses as the slice name.
Where does a slice's color come from?
Each row sets fill to var(--color-chrome) or the matching browser key. config maps those keys to var(--chart-1) through var(--chart-5) and to the labels Chrome, Safari, Firefox, Edge, and Other. ChartContainer writes the --color- variables.
Why does the tooltip say Chrome and not visitors?
Pie sets nameKey="browser", so the hovered slice is named chrome (and the other keys). ChartTooltipContent looks that key up in config and shows the label. hideLabel hides the title. cursor={false} turns the hover cursor off.
How do I add a slice?
Add a row to chartData with browser, visitors, and fill, and add the same key to config with a label and a color. Pie reads the whole array. This file doesn't set innerRadius, so the slices meet in the middle.
API Reference
Chart
Sets config={chartConfig}, content={renderTooltipContent} and cursor={false}. The rest is on the Chart page.
