shadcn.io is not affiliated with official shadcn/ui
Chart examples · Pie
A pie chart with a label for React
A pie chart with each slice's value labeled outside it.
Use it when the values should be readable without a hover. The label prop prints each slice's value outside the pie, joined to its slice by a short label line.
Preview
Installation
FAQ
How do the numbers get outside the slices?
Pie sets label and dataKey to visitors, so each slice prints its visitor count outside the pie. nameKey is browser. This file leaves labelLine unset, so the connector from the slice to that number stays on.
How is the outside text colored?
ChartContainer adds [&_.recharts-pie-label-text]:fill-foreground to mx-auto aspect-square max-h-[250px], plus pb-0. That selector paints the label text with the foreground color.
Which numbers are printed?
Chrome is 275, Safari 200, Firefox 187, Edge 173, and Other 90. The text beside the slice is that visitors value. The browser name is the slice's nameKey.
How are the slices colored?
Each row sets fill to var(--color-chrome) or the matching browser variable. config maps chrome through other to --chart-1 through --chart-5 and to labels Chrome, Safari, Firefox, Edge, and Other.
Related
- A simple pie chartA pie chart of visitors by browser, each
- A pie chart with a custom labelA pie chart printing each slice's value
- A pie chart with a label listA pie chart with each browser's name
- A line chart with a labelA line chart with a dot on each point and
- A bar chart with a labelA bar chart with each bar's value printed
- A pie chart with a legendA pie chart with a wrapping legend of