shadcn.io is not affiliated with official shadcn/ui
Chart examples · Pie
A pie chart with a custom label for React
A pie chart printing each slice's value beside it with a custom label.
Use a custom label when the default one doesn't say what you need. The label prop takes a function that draws each slice's value as text beside it, in the foreground color, and the label lines are turned off.
Preview
Installation
FAQ
How is the number beside each slice drawn?
Pie sets label to renderLabel and labelLine to false. renderLabel returns an SVG text at the x and y it receives, copying textAnchor and dominantBaseline, and the text is payload.visitors.
How is that text colored?
The text element uses className fill-foreground. ChartContainer is mx-auto aspect-square max-h-[250px] with px-0, which leaves the side labels the width of the frame.
What do dataKey and nameKey do here?
dataKey is visitors, so the slice angle and the printed number are the visitor count. nameKey is browser, which is the slice name passed through to the chart.
What does the tooltip call each slice?
ChartTooltipContent sets hideLabel and nameKey to visitors. That key is labeled Visitors in config, so the tooltip row uses that name and the visitor count.
Related
- A pie chart with a labelA pie chart with each slice's value
- A pie chart with a label listA pie chart with each browser's name
- A line chart with a custom labelA line chart labeling each point with its
- A bar chart with a custom labelA horizontal bar chart with the month
- A simple pie chartA pie chart of visitors by browser, each
- A pie chart with a legendA pie chart with a wrapping legend of