Pie Chart

A beautiful, accessible pie and donut chart component with native center content support, smooth animations, and keyboard navigation. Perfect for visualizing proportions and distributions.

Pie, Donut & Semi-circle

Center Content API

Smooth Animations

Keyboard Navigation

TypeScript

Responsive

Basic Example

A donut chart showing market share data with click interactions and center content

Selected: Click a slice to select

Animations

Variant:

Installation

Get started with the PieChart component in just a few steps.

Quick Install

bash

npx mario-charts@latest add pie-chart

Zero Lock-in Philosophy

The component is fully yours to own, modify, and customize.

Variants Comparison

Compare all three chart variants: classic pie, donut with center content, and semi-circle gauge

Pie

Donut

Semi-circle

Custom Center Content

The centerContent prop accepts either a ReactNode or a render function that receives the total and all items

Static Content

Dynamic Content

Budget Breakdown

A complete budget visualization with custom colors and interactive controls

Animations

Variant:

Chart States

Built-in handling for loading, error, and empty states

Loading

Error

Chart Error

Failed to load chart data

Empty

No Data

There's no data to display

Performance Considerations

Tips for optimal performance when working with large datasets

Best Practices

•For datasets with 50+ slices, aggregate smaller values into an “Others” category
•Disable animations with animation={false} for faster rendering
•The component uses useMemo to cache expensive slice calculations
•ResizeObserver ensures efficient responsive behavior without constant re-renders

Development Warnings

In development mode, the component logs warnings for invalid data values (NaN, Infinity, or non-numeric types). Check the browser console if your chart displays unexpected results.

API Reference

Complete reference for all PieChart props

Prop	Type	Default	Description
`data`required	readonly T[]	—	Array of data objects to display in the chart
`value`required	keyof T	—	Key from data object to use for slice values
`label`required	keyof T	—	Key from data object to use for slice labels
`variant`	'pie' \| 'donut' \| 'semi'	'donut'	Visual style - classic pie, donut with center hole, or semi-circle gauge
`innerRadius`	number	0.6	Inner radius as percentage of outer radius (0-1). Only applies to donut/semi variants
`centerContent`	ReactNode \| ((data) => ReactNode)	—	Content to display in the center of donut/semi charts. Can be a static element or render function
`colors`	readonly string[]	DEFAULT_COLORS	Array of colors to use for slices
`height`	number	300	Height of the chart in pixels
`loading`	boolean	false	Show loading state with circular skeleton
`error`	string \| null	null	Error message to display
`animation`	boolean	true	Enable entrance and hover animations
`onSliceClick`	(data: T, index: number) => void	—	Callback fired when a slice is clicked
`className`	string	—	Additional CSS classes to apply to the container