react-pie-chart-explode

A React pie chart component with smooth hover explode animation.

Installation

``bash
npm install react-pie-chart-explode
`

Demo

!Pie Chart Demo

Usage

`tsx
import { PieChart, PieChartConfig, PieSlice } from 'react-pie-chart-explode';

const data: PieSlice[] = [
{ value: 47, label: 'Category A', color: '#4CAF50' },
{ value: 25, label: 'Category B', color: '#2196F3' },
{ value: 15, label: 'Category C', color: '#FF9800' },
{ value: 13, label: 'Category D', color: '#E91E63' },
];

const config: PieChartConfig = {
width: 500,
height: 500,
explodeOffset: 20,
animationDuration: 200,
showLabels: true,
showPercentage: true,
};

function App() {
return (
data={data}
config={config}
onSliceClick={(slice, index) => console.log('Clicked:', slice.label)}
/>
);
}
`

Props

$3

| Prop | Type | Description |
|------|------|-------------|
| data | PieSlice[] | Required. Array of data slices |
| config | PieChartConfig | Chart configuration options |
| className | string | CSS class for the container |
| style | CSSProperties | Inline styles for the container |
| onSliceClick | (slice, index) => void | Callback when a slice is clicked |
| onSliceHover | (slice, index) => void | Callback when a slice is hovered |
| tooltipRenderer | (slice, percentage) => ReactNode | Custom tooltip renderer |

$3

| Property | Type | Description |
|----------|------|-------------|
| value | number | Required. Numeric value for the slice |
| label | string | Required. Label text |
| color | string | Required. Fill color (hex, rgb, etc.) |

$3

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| width | number | 400 | Chart width in pixels |
| height | number | 400 | Chart height in pixels |
| innerRadius | number | 0 | Inner radius (0 for pie, >0 for donut) |
| outerRadius | number | auto | Outer radius |
| explodeOffset | number | 15 | Distance to move slice on hover |
| animationDuration | number | 200 | Animation duration in ms |
| showLabels | boolean | true | Show label text |
| showPercentage | boolean | true | Show percentage values |
| showOuterLabels | boolean | true | Show labels outside the chart |
| labelOffset | number | 20 | Distance of labels from chart |
| strokeColor | string | '#1a1a2e' | Border color between slices |
| strokeWidth | number | 2 | Border width |

Examples

$3

`tsx

`

$3

`tsx
data={data}
config={{
innerRadius: 80,
outerRadius: 150,
}}
/>
`

$3

`tsx
data={data}
config={config}
tooltipRenderer={(slice, percentage) => (



)}
/>
`

$3

`tsx
data={data}
config={{
showLabels: false,
showPercentage: false,
showOuterLabels: false,
explodeOffset: 0,
}}
/>
``

Features

- Smooth hover explode animation
- Supports both pie and donut charts
- Customizable colors, sizes, and animations
- Optional labels and percentages
- Custom tooltip support
- Click and hover events
- TypeScript support
- Zero dependencies (except React)

License

MIT