Pie chart components

Pass a data array of { name: string; value: number; className?: string }. The Recharts <Pie> reads dataKey="value" for the slice size and nameKey="name" for the label shown in the legend and tooltip. The optional className sets the slice color, as described below.

Set a text color class on each data entry via className, such as text-utility-brand-600 or text-utility-neutral-200, because the <Pie> is rendered with fill="currentColor". The same className is picked up by ChartLegendContent, which paints the legend swatch with bg-current, so the legend and the chart stay in sync automatically.

The pie charts are copy-paste examples rather than exported components: what you install is charts-base.tsx, and the five sizes on this page live in pie-charts.demo.tsx. PieChartXxs, PieChartXs, PieChartSm, PieChartMd and PieChartLg differ only in the ResponsiveContainer height (120, 160, 200, 240 and 280), its max-w-* class, and the innerRadius/outerRadius pair on the <Pie> (30/60, 40/80, 50/100, 60/120 and 70/140). Copy the closest one and adjust those numbers for any size in between.

Set innerRadius={0} on the <Pie>. The examples ship as donuts because innerRadius is half of outerRadius; the hole is purely that prop, so there is nothing else to change.

The chart passes <Tooltip content={<ChartTooltipContent isPieChart />} />, where ChartTooltipContent comes from charts-base.tsx. Whenever a single data point is hovered its value becomes the tooltip title, with or without the flag — isPieChart only changes where the supporting line underneath is read from, using the hovered slice's name instead of the axis label. It also accepts Recharts' formatter and labelFormatter, so pass those through the <Tooltip> to format currency or percentages.

Yes. The legend is a standard Recharts <Legend> rendered with content={ChartLegendContent}, so placement props go on the <Legend> itself — the examples use verticalAlign="top" align="right" layout="vertical". Recharts passes them down, and ChartLegendContent reads layout to switch between a stacked column and an inline row, then align to justify the items within it. It also accepts reversed to flip the item order and a className.

Each chart is wrapped in a Recharts ResponsiveContainer with a fixed height and initialDimension={{ width: 1, height: 1 }}, so it fills the width of its parent — the examples cap that with a class such as max-w-96. Animation is off by default because the <Pie> sets isAnimationActive={false}; remove that prop to re-enable Recharts' entry animation.