Pie Chart

The PieChart component is a flexible pie/donut chart built with recharts. It supports donut charts, active slices, custom labels, tooltips, legends, padding angles, and corner radius.

import { PieChart } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
data	DataWithFill<T>[]	-	Array of data objects, optionally with fill color.
nameKey	keyof T & string	-	Key used for slice names.
dataKey	keyof T & string	-	Key used for slice values.
hideTooltipLabel	boolean	false	Hide labels in the tooltip.
showLegend	boolean	false	Show chart legend.
margin	Partial<Margin>	{ top: 20, right: 30, left: 20, bottom: 5 }	Chart margin.
activeIndex	number	-	Index of the currently active slice (increases outer radius).
labelList	LabelListConfig<T>	{ show: false, fontSize: 12, fontWeight: "regular" }	Show labels for slices with font customization.
donut	DonutConfig	{ value: 0, label: { show: false, labelY: 24 } }	Configure donut inner radius and center label.
gap	number	0	Padding angle between slices.
cornerRadius	number | string	0	Corner radius of slices.
className	string	-	Custom class for the chart container.
legendClassName	string	-	Custom class for the legend container.
wrapperClassName	string	-	Custom class for the outer wrapper.

Usage

Basic Example

const data = [
  { category: "Mobile", value: 40, fill: "var(--color-primary)" },
  { category: "Desktop", value: 60, fill: "var(--color-success)" },
];

<PieChart data={data} nameKey="category" dataKey="value" />;

Donut Chart with Center Label

<PieChart
  data={data}
  nameKey="category"
  dataKey="value"
  donut={{ value: 60, label: { show: true, labelY: 20 } }}
/>;

Active Slice

<PieChart
  data={data}
  nameKey="category"
  dataKey="value"
  activeIndex={1}
/>;

Show Slice Labels

<PieChart
  data={data}
  nameKey="category"
  dataKey="value"
  labelList={{ show: true, fontSize: 14, fontWeight: "semibold" }}
/>;

With Legend

<PieChart
  data={data}
  nameKey="category"
  dataKey="value"
  showLegend
  legendClassName="mt-4"
/>;

Custom Gap & Corner Radius

<PieChart
  data={data}
  nameKey="category"
  dataKey="value"
  gap={4}
  cornerRadius={8}
/>;

Features

• Supports pie and donut chart styles.
• Active slice highlighting with enlarged radius.
• Optional center donut label with customizable font.
• Optional slice labels with font customization.
• Tooltips and legend support.
• Configurable padding angle and corner radius for slices.
• Easy color customization per slice using fill property.

Notes

• donut.value defines the inner radius; set to 0 for a standard pie chart.
• activeIndex allows interactive slice highlighting.
• Labels and legends respect the chartConfig built from nameKey and dataKey.