shadcn.io is not affiliated with official shadcn/ui
Chart examples · Pie
A pie chart with no separator for React
A pie chart without the stroke between its slices.
A pie whose slices meet without the stroke between them, for a flatter look. Setting stroke="0" on the Pie removes the separators; colors and the tooltip are the same as in the simple pie.
Preview
Installation
FAQ
How are the gaps between slices removed?
Pie sets stroke to "0". dataKey is visitors and nameKey is browser, so the slices still split by visitor count and keep their browser names.
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.
Which counts are in the pie?
Chrome is 275, Safari 200, Firefox 187, Edge 173, and Other 90. The data keys are lowercase. config supplies the words in the tooltip.
Related
- A simple pie chartA pie chart of visitors by browser, each
- A donut chartA donut chart of visitors by browser, a
- An area chart with gradient fillA stacked area chart whose areas fade
- 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