shadcn.io is not affiliated with official shadcn/ui
Chart examples · Pie
A simple pie chart for React
A pie chart of visitors by browser, each slice in its own color.
The starting point for parts of a whole. Each browser is a slice sized by its visitors and colored from the chart config, and the tooltip names the browser and its count. Keep pies to a handful of slices.
Preview
Installation
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.
Related
- A donut chartA donut chart of visitors by browser, a
- A pie chart with a labelA pie chart with each slice's value
- A pie chart with a legendA pie chart with a wrapping legend of
- A bar chartA bar chart with rounded corners
- An interactive pie chartA donut chart with an active sector, a
- A simple area chartA single-series area chart with a smooth