shadcn.io is not affiliated with official shadcn/ui
Chart examples · Pie
A donut chart for React
A donut chart of visitors by browser, a pie with an empty center.
A pie with an empty center, lighter than a full pie and with room for a number or a caption in the middle. Each browser's slice takes its color from the data, and the tooltip names the browser and its count.
Preview
Installation
FAQ
How is the center hole made?
Pie sets innerRadius to 60. dataKey is visitors and nameKey is browser, so each slice is one browser's visitor count.
How does each slice get its color?
Each row sets fill to a variable such as var(--color-chrome). config maps chrome, safari, firefox, edge, and other to --chart-1 through --chart-5, with labels Chrome, Safari, Firefox, Edge, and Other.
What does the tooltip show?
ChartTooltipContent sets hideLabel, and cursor is false. The slice name comes from nameKey browser, looked up in config, and the value is visitors.
Why is the chart square?
ChartContainer uses mx-auto aspect-square max-h-[250px], so the donut stays square and caps at 250px tall. The outer frame is w-full max-w-xl.
Related
- A simple pie chartA pie chart of visitors by browser, each
- A donut chart with textA donut chart with the total number of
- A donut chart with an active sectorA donut chart with its first sector
- An interactive pie chartA donut chart with an active sector, a
- A radial chartA radial bar chart with one ring per
- A pie chart with a labelA pie chart with each slice's value