@aniruddha1806/pie-chart

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>
  );
};