Pie Chart

Pie charts represent data as proportional slices of a circle. They are ideal for showing the relative composition of a whole, making it easy to compare parts to the total.

Interface

PieChart Props

interface PieChartProps {
  // Required properties
  data: PieChartData;

  // Optional properties
  custom?: Partial<PieChartCustom>;
  title?: string;
  innerRadius?: number;    // Inner radius for donut style (0 = full pie)
  colors?: string[];       // Custom color palette
}

Data Structure

type PieChartData = {
  labels: string[];      // Label for each slice
  values: number[];      // Value for each slice
  title?: string;        // Chart title
};

Basic Usage

import Widget from '@meursyphus/flitter-react';
import { PieChart } from '@meursyphus/headless-chart';

const data = {
  labels: ['Chrome', 'Firefox', 'Safari', 'Edge', 'Other'],
  values: [65, 15, 10, 7, 3],
  title: 'Browser Market Share'
};

function BasicPieChart() {
  return (
    <Widget
      width="500px"
      height="400px"
      widget={PieChart({ data })}
    />
  );
}

Chart Components

Pie Chart consists of the following hierarchical structure:

PieChart
└── Layout (overall layout)
    ├── Title (chart title)
    ├── Pie (pie area)
    │   ├── Slice (individual slice)
    │   └── DataLabel (data labels)
    └── Legend (legend items)

Customizable Elements

You can customize the following components through the custom prop:

Real-World Usage Examples

1. Donut Chart

const donutChart = PieChart({
  data,
  innerRadius: 0.6,  // 60% inner radius creates donut shape
  custom: {
    slice: ({ label, value, percentage, startAngle, sweepAngle, index }) => {
      // Custom slice rendering
    }
  }
});

2. Custom Data Labels

const labeledPie = PieChart({
  data,
  custom: {
    dataLabel: ({ label, value, percentage, index }) => {
      return Text(`${label}: ${percentage.toFixed(1)}%`, {
        style: new TextStyle({
          fontSize: 12,
          fontWeight: 'bold',
          color: '#374151'
        })
      });
    }
  }
});

Next Steps

• For more examples, check out the demo page
• Try using innerRadius to create donut charts
• Combine with legends for better data labeling