Legend Pie Chart
Display categorical data with an external legend showing colors and category names. Perfect for React applications requiring clear data identification with Next.js integration and TypeScript support.
Powered by
Installation
npx shadcn@latest add https://www.shadcn.io/registry/pie-chart-06.jsonnpx shadcn@latest add https://www.shadcn.io/registry/pie-chart-06.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/pie-chart-06.jsonbunx shadcn@latest add https://www.shadcn.io/registry/pie-chart-06.jsonFeatures
- External legend display with color indicators and category names below chart
- Flexible legend layout using flexbox with wrapping and responsive positioning
- Custom legend styling with centered alignment and consistent spacing
- Clean chart presentation without on-segment labels for minimal design
- TypeScript support with complete type definitions for legend configuration
- shadcn/ui integration using Chart and legend components without background
Use Cases
This free open source React component works well for:
- Clean presentations - Display data without cluttering the chart with on-segment text built with Next.js
- Professional reports - Present statistics with organized external legend using TypeScript and Tailwind CSS
- Dashboard layouts - Show categorical data with space-efficient legend positioning
- Accessibility-focused - Provide clear category identification outside the chart area
API Reference
ChartPieLegend
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the container |
Chart Configuration
The component uses the same browser data configuration:
const chartConfig = {
visitors: {
label: "Visitors",
},
chrome: {
label: "Chrome",
color: "var(--chart-1)",
},
// ... additional segments
} satisfies ChartConfigLegend Implementation
The key feature is the ChartLegend component with custom styling:
<PieChart>
<Pie data={chartData} dataKey="visitors" />
<ChartLegend
content={<ChartLegendContent nameKey="browser" />}
className="-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center"
/>
</PieChart>Implementation Notes
- Legend positioned below chart with slight upward translation
- Uses flexbox with wrapping for responsive legend layout
- Each legend item takes 1/4 basis width with centered justification
- No on-chart labels for cleaner segment appearance
- Legend automatically maps browser keys to display labels
- Maintains chart interactivity while providing external reference
Label List Pie Chart
Display categorical data with formatted labels showing browser names directly on segments. Perfect for React applications requiring enhanced label presentation with Next.js integration and TypeScript support.
Donut Chart
Display categorical data with inner radius creating donut shape. Perfect for React applications requiring central space for additional information with Next.js integration and TypeScript support.