Shadcn.io is not affiliated with official shadcn/ui
A simple pie chart
A simple React pie chart for visualizing categorical data proportions using shadcn/ui and Recharts
Pie charts make proportions obvious at a glance. This React pie chart divides a circle into slices representing browser market share, with each segment's size proportional to its value. Built with shadcn/ui and Recharts, colors from chartConfig automatically apply to each category. The circular form makes it immediately clear which browsers dominate—Chrome's large slice versus Edge's smaller one. Perfect for market share analysis, budget allocation, survey results, or any categorical data where you want to show parts of a whole.
A simple pie chart preview
Installation
Related Components
Donut Chart
Pie with center hole for text or emphasis
Pie Chart with Labels
Labels showing values on each slice
Pie Chart with Legend
Legend for category identification
Bar Chart
Alternative for comparing discrete categories
Interactive Pie Chart
Active sector highlighting with center text
Area Chart
Showing trends over time instead
FAQ
Was this page helpful?
Sign in to leave feedback.
A pie chart with no separator
A React pie chart with no separators between slices using stroke='0' for seamless color transitions with shadcn/ui and Recharts
A pie chart with stacked sections
A React pie chart with stacked concentric rings comparing two related datasets using multiple Pie components with shadcn/ui and Recharts