@hamshad/pie-chart

A beautiful, animated pie chart component with rounded corners for React.

Demo

Below are two short demos showing the chart animation and interaction.

Installation

npm install @hamshad/pie-chart
# or
yarn add @hamshad/pie-chart

Usage

import { RoundedPieChart } from '@hamshad/pie-chart';

const data = [
  { value: 2.5, label: '+2.5%', color: '#E8D89C' },
  { value: 0.5, label: '-0.5%', color: '#9B6BA8' },
  { value: 0.4, label: '+0.4%', color: '#E89B8C' }
];

function App() {
  return (
    <RoundedPieChart 
      data={data}
      size={300}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | PieChartSegment[] | Required | Array of segments with value, label, and color | | size | number | 300 | Size of the chart in pixels | | innerRadiusRatio | number | 0.6875 | Ratio of inner radius to outer radius (0-1) | | cornerRadius | number | 8 | Radius of rounded corners | | gap | number | 3 | Gap between segments in degrees | | hoverOffset | number | 5 | Distance segments move out on hover | | animationDuration | number | 600 | Animation duration in milliseconds | | showLabelsOnHover | boolean | true | Show labels only on hover | | labelDistance | number | 30 | Distance of labels from chart | | className | string | '' | Additional CSS classes |

Data Format

interface PieChartSegment {
  value: number;    // Numeric value
  label: string;    // Display label
  color: string;    // Hex color code
}

Features

• ✨ Smooth animations on load and hover
• 🎨 Customizable colors and sizes
• 📱 Responsive and accessible
• 🎯 TypeScript support
• 🪶 Lightweight with no dependencies
• 🔄 Rounded corners for modern design

Contributing

Contributions are welcome! Please read the Contributing Guide for setup, branch naming, commit style, and pull request guidelines.

By participating you agree to follow the Code of Conduct. Security issues? Please see SECURITY.md for private disclosure instructions.

License

MIT

Development

Development instructions (running the example, builds, etc.) were moved to DEV_README.md. See DEV_README.md for details and exact npm scripts.