Pie Chart
Pie charts are used to represent proportions or percentages of a whole, making them ideal for showing part-to-whole relationships. They include donut variants.
Basic
Present data in a simple and visually appealing way using a basic pie chart.
Installation
Install the component via the CLI in one command.
npx shadcn@latest add @intentui/pie-chart
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install recharts
Donut
Visualize data with a donut chart for a modern and clean look.
Label inside
Enhance your donut chart by adding descriptive text for better understanding.
Component "visualizations/pie-chart/pie-chart-donut-label-demo" not found in the registry.
Controlled
Sometimes you might want to control the chart data dynamically.
Gap
Add spacing between pie slices for better visibility and aesthetics.
Intent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.