Donut Chart
Display categorical data with inner radius creating donut shape. Perfect for React applications requiring central space for additional information with Next.js integration and TypeScript support.
Powered by
Installation
npx shadcn@latest add https://www.shadcn.io/registry/pie-chart-07.jsonnpx shadcn@latest add https://www.shadcn.io/registry/pie-chart-07.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/pie-chart-07.jsonbunx shadcn@latest add https://www.shadcn.io/registry/pie-chart-07.jsonFeatures
- Donut shape design with 60px inner radius creating central empty space
- Clean tooltip display with hidden labels for focused data presentation
- Browser usage data showing Chrome, Safari, Firefox, Edge, and Other segments
- Color-coded segments using chart color variables for consistent theming
- TypeScript support with complete interface definitions and type safety
- shadcn/ui integration using ChartContainer without background wrapper
Use Cases
This free open source React component works well for:
- Performance dashboards - Show browser usage statistics with central space for totals built with Next.js
- Analytics displays - Present categorical data with room for additional metrics using TypeScript and Tailwind CSS
- Clean presentations - Display proportional data with modern donut chart design
- Space-efficient layouts - Maximize data display while preserving central area for content
API Reference
ChartPieDonut
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the container |
Chart Configuration
The component uses browser visitor data:
const chartConfig = {
visitors: {
label: "Visitors",
},
chrome: {
label: "Chrome",
color: "var(--chart-1)",
},
safari: {
label: "Safari",
color: "var(--chart-2)",
},
// ... additional browsers
} satisfies ChartConfigDonut Implementation
Key feature is the Pie component with inner radius:
<Pie
data={chartData}
dataKey="visitors"
nameKey="browser"
innerRadius={60}
/>Implementation Notes
- Inner radius of 60px creates optimal donut proportions
- Tooltip configured with cursor disabled and hidden labels
- Each segment uses fill property for custom coloring
- Chart maintains aspect ratio with max height constraint
- Central space available for additional content or labels
- Component designed without background for flexible integration
Legend Pie Chart
Display categorical data with an external legend showing colors and category names. Perfect for React applications requiring clear data identification with Next.js integration and TypeScript support.
Interactive Donut Chart
Interactive donut chart with highlighted active sector and enhanced visual feedback. Perfect for React applications requiring dynamic sector emphasis with Next.js integration and TypeScript support.