Pie Chart

A flexible pie chart component for visualizing proportional data with customizable styling options.

Usage

import PieChart from '@/components/PieChart';

export default function MyPage() {
  // Data for the pie chart
  const data = [
    { name: 'Design', value: 30 },
    { name: 'Development', value: 40 },
    { name: 'Marketing', value: 20 },
    { name: 'Support', value: 10 }
  ];

  return (
    <PieChart 
      width={300}
      height={300}
      data={data}
      colors={['#6366f1', '#a855f7', '#ec4899', '#f43f5e']}
    />
  );
}

Examples

Basic Pie Chart

A simple pie chart with default styling.

const data = [
  { name: 'Design', value: 30 },
  { name: 'Development', value: 40 },
  { name: 'Marketing', value: 20 },
  { name: 'Support', value: 10 }
];

<PieChart 
  width={300}
  height={300}
  data={data}
/>

Donut Chart

A donut chart created by setting an inner radius.

<PieChart 
  width={300}
  height={300}
  data={data}
  innerRadius={60}
  colors={['#6366f1', '#a855f7', '#ec4899', '#f43f5e']}
/>

More Data Points

A pie chart with more data points and custom colors.

const productData = [
  { name: 'Product A', value: 35 },
  { name: 'Product B', value: 25 },
  { name: 'Product C', value: 20 },
  { name: 'Product D', value: 15 },
  { name: 'Product E', value: 5 }
];

<PieChart 
  width={300}
  height={300}
  data={productData}
  colors={['#0ea5e9', '#06b6d4', '#14b8a6', '#10b981', '#84cc16']}
/>