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