react-pie-chart-explode

react-pie-chart-explode

A React pie chart component with smooth hover explode animation.

Installation

npm install react-pie-chart-explode

Demo

Usage

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 (
    <PieChart
      data={data}
      config={config}
      onSliceClick={(slice, index) => console.log('Clicked:', slice.label)}
    />
  );
}

Props

PieChartProps

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

PieSlice

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

PieChartConfig

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

Basic Pie Chart

<PieChart data={data} />

Donut Chart

<PieChart
  data={data}
  config={{
    innerRadius: 80,
    outerRadius: 150,
  }}
/>

With Custom Tooltip

<PieChart
  data={data}
  config={config}
  tooltipRenderer={(slice, percentage) => (
    <div className="tooltip">
      <strong>{slice.label}</strong>
      <p>Value: {slice.value}</p>
      <p>Percentage: {percentage.toFixed(2)}%</p>
    </div>
  )}
/>

Minimal (No Labels)

<PieChart
  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