PieChart

Updated: May 14, 2025

The PieChart component provides a way to display pie charts with interactive features, including hover effects, click events, and custom styling options. It supports various customization options including different chart types, color schemes, and interactive features.

Microplastics Ingested AnnuallyEstimated particles per person per source

Ring

ring sets the inner and outer radius as percentages of the available space. inner: 0 is a solid pie; anything above it is a donut, and the hole is where a total or a label goes.

A thin donutring={{ inner: 60, outer: 70 }}

Keep outer under 100 — the arc is drawn inside the panel, and a value at 100 leaves no room for the labels around it.

Naming the slices

A pie reads two fields per row: the number that sizes the slice and the string that names it. Those default to value and name, and dataKey / nameKey point them at different fields when your data is already shaped some other way.

Custom keys

// Rows from an API, unchanged.
const rows = [
{ channel: "Direct", sessions: 4200 },
{ channel: "Search", sessions: 3100 },
];

<PieChart
dataKey="sessions"
nameKey="channel"
series={{ key: "sessions" }}
data={rows}
/>

Position

origo moves the centre of the pie within the panel, as percentages. Shift it when the legend sits along one side and the default centring leaves the arc crowded against it.

API reference

PieChart has no axes or grid, so axis and grid do not apply.

Prop	Type	Default
ring Inner and outer radius as percentages. inner: 0 is a solid pie.	{ inner: number; outer: number }	{ inner: 0, outer: 80 }
dataKey Field holding the number that sizes each slice.	string	value
nameKey Field holding the slice label.	string	name
origo Centre of the pie within the panel, as percentages.	{ x: number; y: number }	{ x: 50, y: 50 }
legend Legend position and visibility.	LegendConfig	{}
error Render the error state instead of the chart.	boolean	false
tooltip Show a tooltip on hover.	boolean	true
loading Render the loading state instead of the chart.	boolean	false
border Panel border colour. false removes it.	Colorssurfacetransparentboolean	neutral-alpha-weak
…and every ChartProps prop	inherited	—
…and every FlexProps prop	inherited	—

DataLineBarChart

DataRadialGauge

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club