Pie Chart
Pie and donut charts with padded sectors, labels, and optional sector glow.
Basic chart
@spectrumui/pie-chart
- Chrome
- Safari
- Firefox
- Edge
- Other
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
innerRadius={62}
- Chrome
- Safari
- Firefox
- Edge
- Other
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
paddingAngle={6} cornerRadius={10}
- Chrome
- Safari
- Firefox
- Edge
- Other
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
showLabels
- Chrome
- Safari
- Firefox
- Edge
- Other
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
glowing
- Chrome
- Safari
- Firefox
- Edge
- Other
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
Login to view codeCreate a free account to access component source code
Manual installation
Prefer to copy by hand? Open the Code tab on any example above and switch to the file you need — every source file is there, not just the demo. Drop them in your project like this:
chart-kit.tsxcomponents/spectrumui/charts/chart-kit.tsxpie-chart.tsxcomponents/spectrumui/charts/pie-chart.tsx
Then install its dependencies: npm i recharts framer-motion
Usage
import { PieChart } from '@/components/spectrumui/charts/pie-chart';
<PieChart data={data} />