Skip to main content

​
Overview

100%
Donut
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

npm install @araf-ds/core recharts

​
Usage

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

<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

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

​
Radial Bar (Progress Comparison)

<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

​
data
PieDataItem[]
required
Array of segments: { name: string, value: number, color: string }.
​
variant
string
default:"donut"
Chart type. Values: pie · donut · radial
​
height
number
default:"280"
Chart height in pixels.
​
centerLabel
string
Label text shown in the center hole (donut only).
​
centerValue
string
Value text shown in the center hole (donut only).
​
innerRadius
number
default:"60"
Inner radius in pixels for donut variant (0 = solid pie).
​
showLabels
boolean
default:"false"
Show percentage labels on each segment.
​
showLegend
boolean
default:"true"
Show color legend.
​
showTooltip
boolean
default:"true"
Show interactive hover tooltips.

​
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

Do

  • 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

Don't

  • 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