React Pie Chart with Label List

Keep labels contained within the chart. This React pie chart uses LabelList to position labels inside segments rather than extending outward with connecting lines. The fill-background class ensures text contrasts with segment colors, staying readable in both light and dark themes. Built with Recharts and shadcn/ui, this compact layout works well when segments are large enough to contain text. Perfect for space-constrained Next.js dashboards or card widgets where extending labels would break the layout.

React Pie Chart with Label List preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/pie-label-list.json

npx shadcn@latest add https://www.shadcn.io/r/pie-label-list.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/pie-label-list.json

bunx shadcn@latest add https://www.shadcn.io/r/pie-label-list.json

Related Components

FAQ