build69
build69  /  Components  /  Charts  /  PieChart

PieChart

v1.0.4Updated 25 Jul 2026

Recharts-backed pie / donut chart with external labels and click-to-highlight mode. Use for part-of-whole when there are 2-6 slices.

Preview

Live · 8 stories
DefaultOpen ↗
Why this is recommendedchartpiedonutrecharts+3

The default, out-of-the-box PieChart.

Recommended for+14
  • Status mix
  • Channel mix
  • Up to ~6 slices
Tags+6
chartpiedonutrechartspart-of-wholedata-vizdefault
Features+4
  • Pie / donut modes
  • External labels (with leader lines)
  • Click-to-highlight slice
  • Custom palette
  • i18n: numbers/axis values format per LocaleProvider locale
Not recommended for−2
  • > 6 slices (use BarChart)
  • Trend over time (use AreaChart)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "PieChart" })

Usage

import { PieChart } from '@/components/data-viz/pie-chart';

<PieChart data={mix} donut />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
data

Slices

PieDatum[]yes
donut

Donut mode

boolean

Related