React Pie Chart

A powerful, customizable pie chart component for React applications with TypeScript support. Perfect for visualizing proportional data with interactive features, animations, and flexible styling options.

Installation

npm install @aniruddha1806/pie-chart

Features

• 🥧 Interactive pie charts and donut charts
• 🎭 Smooth animations with multiple easing options
• 🖱️ Hover effects and click handlers
• 📊 Interactive tooltips with customizable formatting
• 🏷️ Configurable legend with multiple positioning options
• 🎨 Extensive customization (colors, radius, thickness, start angle)
• 📱 Responsive SVG-based rendering
• 🔄 Scroll-triggered animations
• 📝 TypeScript support with full type definitions
• ♿ Accessibility-friendly structure
• 🪶 Zero dependencies for chart rendering

Quick Start

Basic Pie Chart

import PieChart from '@aniruddha1806/pie-chart';

function App() {
  const data = [
    { label: 'Desktop', value: 45, color: '#3b82f6' },
    { label: 'Mobile', value: 35, color: '#10b981' },
    { label: 'Tablet', value: 20, color: '#f59e0b' }
  ];

  return (
    <PieChart
      data={data}
      width={400}
      height={400}
      showLegend={true}
      animate={true}
    />
  );
}

Donut Chart

import PieChart from '@aniruddha1806/pie-chart';

function DonutExample() {
  const data = [
    { label: 'Sales', value: 120000 },
    { label: 'Marketing', value: 80000 },
    { label: 'Development', value: 150000 },
    { label: 'Support', value: 60000 }
  ];

  return (
    <PieChart
      data={data}
      width={500}
      height={500}
      donut={true}
      donutThickness={40}
      legendPosition="right"
      animate={true}
      animationDuration={800}
    />
  );
}

Props

Core Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | PieChartData[] | required | Chart data array | | width | number \| string | "100%" | Chart width | | height | number \| string | "100%" | Chart height | | radius | number | 50 | Chart radius (SVG units) |

Styling Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | undefined | CSS class for container | | sliceClassName | string | undefined | CSS class for slices | | tooltipClassName | string | undefined | CSS class for tooltips | | legendClassName | string | undefined | CSS class for legend | | colors | string[] | default palette | Color palette for slices |

Donut Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | donut | boolean | false | Enable donut chart mode | | donutThickness | number | 30 | Thickness of donut ring |

Animation Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | animate | boolean | true | Enable animations | | animationDuration | number | 500 | Animation duration (ms) | | animationEasing | "linear" \| "easeIn" \| "easeOut" \| "easeInOut" | "easeOut" | Animation easing | | animateOnScroll | boolean | true | Trigger animation on scroll | | startAngle | number | 0 | Starting angle (degrees) |

Legend Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | showLegend | boolean | true | Show legend | | legendPosition | "top" \| "right" \| "bottom" \| "left" | "right" | Legend position |

Interaction Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onSliceClick | (data: PieChartData, index: number) => void | undefined | Slice click handler | | tooltipFormat | (label: string, value: number, percentage: number) => string | undefined | Custom tooltip formatter | | percentageFormatter | (percentage: number) => string | default | Percentage formatter |

Data Types

type PieChartData = {
  label: string;
  value: number;
  color?: string;
};

Examples

Sales Dashboard

Complete sales breakdown with interactive features:

import { useState } from 'react';
import PieChart from '@aniruddha1806/pie-chart';

function SalesDashboard() {
  const [selectedSlice, setSelectedSlice] = useState(null);

  const salesData = [
    { label: 'Online Sales', value: 450000, color: '#3b82f6' },
    { label: 'Retail Stores', value: 320000, color: '#10b981' },
    { label: 'Wholesale', value: 180000, color: '#f59e0b' },
    { label: 'Direct Sales', value: 120000, color: '#ef4444' },
    { label: 'Partnerships', value: 80000, color: '#8b5cf6' }
  ];

  const handleSliceClick = (data, index) => {
    setSelectedSlice(data);
    console.log(`Clicked on ${data.label}: $${data.value.toLocaleString()}`);
  };

  const formatTooltip = (label, value, percentage) => {
    return `${label}: $${value.toLocaleString()} (${percentage.toFixed(1)}%)`;
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Sales Breakdown by Channel</h2>
      
      <PieChart
        data={salesData}
        width={600}
        height={400}
        onSliceClick={handleSliceClick}
        tooltipFormat={formatTooltip}
        legendPosition="right"
        animate={true}
        animationDuration={1000}
        animationEasing="easeInOut"
      />
      
      {selectedSlice && (
        <div style={{ 
          marginTop: '20px', 
          padding: '16px', 
          backgroundColor: '#f8fafc',
          borderRadius: '8px',
          border: '1px solid #e2e8f0'
        }}>
          <h3>Selected: {selectedSlice.label}</h3>
          <p>Revenue: ${selectedSlice.value.toLocaleString()}</p>
          <p>Percentage: {((selectedSlice.value / salesData.reduce((sum, item) => sum + item.value, 0)) * 100).toFixed(1)}%</p>
        </div>
      )}
    </div>
  );
}

TypeScript Usage

The component provides full TypeScript support:

import PieChart, { PieChartData, PieChartProps } from '@aniruddha1806/pie-chart';
import { useState, useCallback } from 'react';

interface SalesData {
  category: string;
  amount: number;
  color?: string;
}

interface ChartConfig {
  title: string;
  showPercentages: boolean;
  animationSettings: {
    duration: number;
    easing: "linear" | "easeIn" | "easeOut" | "easeInOut";
  };
}

const SalesAnalytics: React.FC = () => {
  const [salesData, setSalesData] = useState<SalesData[]>([
    { category: 'Product A', amount: 150000, color: '#3b82f6' },
    { category: 'Product B', amount: 120000, color: '#10b981' },
    { category: 'Product C', amount: 90000, color: '#f59e0b' }
  ]);

  const transformToChartData = useCallback((data: SalesData[]): PieChartData[] => {
    return data.map(item => ({
      label: item.category,
      value: item.amount,
      color: item.color
    }));
  }, []);

  const handleSliceClick = useCallback((data: PieChartData, index: number): void => {
    console.log(`Clicked on \${data.label}: \${data.value}`);
    // Handle slice click logic
  }, []);

  const formatTooltip = useCallback((
    label: string, 
    value: number, 
    percentage: number
  ): string => {
    return `\${label}: $\${value.toLocaleString()} (\${percentage.toFixed(1)}%)`;
  }, []);

  const chartConfig: ChartConfig = {
    title: 'Sales by Product',
    showPercentages: true,
    animationSettings: {
      duration: 1000,
      easing: 'easeInOut'
    }
  };

  const chartData = transformToChartData(salesData);

  const pieChartProps: PieChartProps = {
    data: chartData,
    width: 500,
    height: 400,
    donut: true,
    donutThickness: 50,
    animate: true,
    animationDuration: chartConfig.animationSettings.duration,
    animationEasing: chartConfig.animationSettings.easing,
    onSliceClick: handleSliceClick,
    tooltipFormat: formatTooltip,
    legendPosition: 'right',
    showLegend: true
  };

  return (
    <div>
      <h2>{chartConfig.title}</h2>
      <PieChart {...pieChartProps} />
      
      <div>
        <h3>Sales Summary:</h3>
        {salesData.map(item => (
          <div key={item.category}>
            <strong>{item.category}:</strong> ${item.amount.toLocaleString()}
          </div>
        ))}
      </div>
    </div>
  );
};