> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Pie Chart

> A circular chart for visualizing part-to-whole proportions — supports pie, donut, and radial bar variants.

## Overview

<div style={{padding:"28px 24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",justifyContent:"center"}}>
  <div style={{fontFamily:"Inter,sans-serif",display:"flex",gap:"32px",alignItems:"center",flexWrap:"wrap",justifyContent:"center"}}>
    <div style={{display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"}}>
      <div style={{position:"relative",width:"100px",height:"100px"}}>
        <svg viewBox="0 0 36 36" width="100" height="100" style={{transform:"rotate(-90deg)"}}>
          <circle cx="18" cy="18" r="15.9155" fill="transparent" stroke="#E5E7EB" strokeWidth="3.5" />

          <circle cx="18" cy="18" r="15.9155" fill="transparent" stroke="#0479CE" strokeWidth="3.5" strokeDasharray="45 55" strokeLinecap="round" />

          <circle cx="18" cy="18" r="15.9155" fill="transparent" stroke="#93C5FD" strokeWidth="3.5" strokeDasharray="28 72" strokeDashoffset="-45" strokeLinecap="round" />

          <circle cx="18" cy="18" r="15.9155" fill="transparent" stroke="#BFDBFE" strokeWidth="3.5" strokeDasharray="27 73" strokeDashoffset="-73" strokeLinecap="round" />
        </svg>

        <div style={{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column"}}>
          <div style={{fontSize:"16px",fontWeight:700,color:"#101828"}}>100%</div>
        </div>
      </div>

      <span style={{fontSize:"12px",color:"#667085"}}>Donut</span>
    </div>

    <div style={{display:"flex",flexDirection:"column",gap:"6px"}}>
      {[
                  {label:"Direct",pct:"45%",color:"#0479CE"},
                  {label:"Referral",pct:"28%",color:"#93C5FD"},
                  {label:"Organic",pct:"27%",color:"#BFDBFE"},
                ].map(item => (
                  <div key={item.label} style={{display:"flex",alignItems:"center",gap:"8px",fontSize:"13px"}}>
                    <div style={{width:"10px",height:"10px",borderRadius:"2px",background:item.color,flexShrink:0}}></div>
                    <span style={{color:"#344054"}}>{item.label}</span>
                    <span style={{color:"#101828",fontWeight:600,marginLeft:"auto"}}>{item.pct}</span>
                  </div>
                ))}
    </div>
  </div>
</div>

**Pie Chart** displays part-to-whole proportions as arc segments. It supports a standard pie, a **donut** (hollow center for KPI display), and a **radial bar** variant for progress-style comparisons.

***

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @araf-ds/core recharts
  ```

  ```bash yarn theme={null}
  yarn add @araf-ds/core recharts
  ```

  ```bash pnpm theme={null}
  pnpm add @araf-ds/core recharts
  ```
</CodeGroup>

***

## Usage

```tsx theme={null}
import { PieChart } from "@araf-ds/core"

const data = [
  { name: "Direct", value: 45, color: "#0479CE" },
  { name: "Referral", value: 28, color: "#93C5FD" },
  { name: "Organic", value: 27, color: "#BFDBFE" },
]

export default function Example() {
  return (
    <PieChart
      data={data}
      variant="donut"
      height={280}
      centerLabel="Traffic"
      centerValue="100%"
    />
  )
}
```

***

## Variants

### Pie

```tsx theme={null}
<PieChart
  data={[
    { name: "Chrome", value: 63, color: "#0479CE" },
    { name: "Safari", value: 19, color: "#93C5FD" },
    { name: "Firefox", value: 10, color: "#BFDBFE" },
    { name: "Other", value: 8, color: "#E5E7EB" },
  ]}
  variant="pie"
  height={280}
  showLabels
/>
```

### Donut with Center Label

```tsx theme={null}
<PieChart
  data={trafficSources}
  variant="donut"
  height={280}
  centerLabel="Total visits"
  centerValue="48,295"
/>
```

### Radial Bar (Progress Comparison)

```tsx theme={null}
<PieChart
  data={[
    { name: "Q1", value: 78, color: "#0479CE" },
    { name: "Q2", value: 56, color: "#93C5FD" },
    { name: "Q3", value: 91, color: "#16A34A" },
    { name: "Q4", value: 44, color: "#F59E0B" },
  ]}
  variant="radial"
  height={280}
  showLegend
/>
```

***

## API Reference

<ParamField path="data" type="PieDataItem[]" required>
  Array of segments: `{ name: string, value: number, color: string }`.
</ParamField>

<ParamField path="variant" type="string" default="donut">
  Chart type. Values: `pie` · `donut` · `radial`
</ParamField>

<ParamField path="height" type="number" default="280">
  Chart height in pixels.
</ParamField>

<ParamField path="centerLabel" type="string">
  Label text shown in the center hole (donut only).
</ParamField>

<ParamField path="centerValue" type="string">
  Value text shown in the center hole (donut only).
</ParamField>

<ParamField path="innerRadius" type="number" default="60">
  Inner radius in pixels for donut variant (0 = solid pie).
</ParamField>

<ParamField path="showLabels" type="boolean" default="false">
  Show percentage labels on each segment.
</ParamField>

<ParamField path="showLegend" type="boolean" default="true">
  Show color legend.
</ParamField>

<ParamField path="showTooltip" type="boolean" default="true">
  Show interactive hover tooltips.
</ParamField>

***

## Accessibility

* SVG chart includes `<title>` and `<desc>` with a text summary of the proportions
* Provide a data table fallback — pie charts are purely visual
* Use sufficient color contrast between adjacent segments (minimum 3:1 ratio)
* Do not rely solely on color to distinguish segments — use labels or patterns

***

## Do's & Don'ts

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * Use Pie/Donut charts for showing proportions summing to 100%
    * Limit to 5–6 segments maximum — more becomes unreadable
    * Use the Donut variant with `centerValue` to highlight the total metric
    * Sort segments from largest to smallest, starting at 12 o'clock
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * Don't use Pie Chart for comparing exact values — use Bar Chart instead
    * Don't use more than 6 segments — group small values into "Other"
    * Don't use 3D pie charts — they distort proportional perception
    * Don't use similar colors for adjacent segments
  </Card>
</CardGroup>