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.
Powered by
Installation
npx shadcn@latest add https://www.shadcn.io/registry/pie-chart-08.jsonnpx shadcn@latest add https://www.shadcn.io/registry/pie-chart-08.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/pie-chart-08.jsonbunx shadcn@latest add https://www.shadcn.io/registry/pie-chart-08.jsonFeatures
- Active sector highlighting with first segment automatically emphasized
- Enhanced visual feedback using expanded outer radius for active sector
- Stroke width styling with 5px border for better visual definition
- Custom active shape using Sector component with dynamic radius adjustment
- Browser usage tracking showing Chrome, Safari, Firefox, Edge, and Other data
- TypeScript support with PieSectorDataItem types for shape customization
Use Cases
This free open source React component works well for:
- Interactive dashboards - Highlight specific data segments with visual emphasis built with Next.js
- Presentation tools - Draw attention to particular categories using TypeScript and Tailwind CSS
- Data exploration - Provide visual feedback for focused data segments
- Educational displays - Emphasize key data points for better understanding
API Reference
ChartPieDonutActive
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the container |
Active Shape Configuration
The key feature is the custom activeShape function:
<Pie
data={chartData}
dataKey="visitors"
nameKey="browser"
innerRadius={60}
strokeWidth={5}
activeIndex={0}
activeShape={({
outerRadius = 0,
...props
}: PieSectorDataItem) => (
<Sector {...props} outerRadius={outerRadius + 10} />
)}
/>Chart Configuration
Standard browser data with color mapping:
const chartConfig = {
visitors: {
label: "Visitors",
},
chrome: {
label: "Chrome",
color: "var(--chart-1)",
},
// ... additional browsers
} satisfies ChartConfigImplementation Notes
- Active sector automatically set to first segment (index 0)
- Active shape extends outer radius by 10px for visual emphasis
- Stroke width of 5px provides clear segment boundaries
- Uses PieSectorDataItem type for proper TypeScript support
- Maintains donut shape with 60px inner radius
- Component designed without background for flexible integration
- Active highlighting provides immediate visual feedback
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.
Centered Text Donut Chart
Donut chart with centered text displaying total value and dynamic calculations. Perfect for React applications requiring data summaries with Next.js integration and TypeScript support.