shadcn.io is not affiliated with official shadcn/ui
About
Use it when slice labels would crowd or the names are long: the legend moves them under the pie and lets the slices stay clean. If the slices are big enough, the Pie Chart with Label List saves the legend's height.
Five browser slices fill the pie, and under it a centered, wrapping row of small square swatches with the browser names. The chart is 300px tall at most, to fit both.
Installation
Usage
import { ChartPieLegend } from "@/components/charts/chart-pie-legend";<ChartPieLegend />Customize
<ChartLegend content={<ChartLegendContent nameKey="browser" />} />inside<PieChart>lists one item per sector.nameKey="browser"looks each item up inchartConfig, so the legend reads "Chrome", not "chrome".className="-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center"wraps the items into rows and centers them.- There's no
<ChartTooltip>here; the legend carries the names.
FAQ
How is the legend added?
<ChartLegend content={<ChartLegendContent nameKey="browser" />} /> inside <PieChart>. nameKey tells the legend to look each item up in chartConfig by its browser value.
How do I change the legend's order?
The legend follows the sectors, so reorder chartData to reorder both. Leave visitors out of the colored entries: it has a label but no color.
How does the legend lay out on small screens?
className="-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center" on <ChartLegend> wraps the items four to a row and pulls the legend up toward the pie.
API Reference
ChartContainer
configChartConfig
Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.
initialDimension?{ height: number; width: number; }
The size it renders at before it's measured, so the first paint isn't * empty.
- Type
{ height: number; width: number; }- Default
INITIAL_DIMENSION
className?string
Merged with the part's classes.
ChartLegend
ChartLegendContent
<div>
hideIcon?boolean
Hides each series' icon (from config), leaving its color swatch.
- Default
false
nameKey?string
The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.
className?string
Merged with the part's classes.
ChartStyle
<style>
configChartConfig
The chart config whose colors it writes as --color-<key> variables.
idstring
The element's id.
ChartTooltip
ChartTooltipContent
<div>
hideIndicator?boolean
Hides each item's color indicator.
- Default
false
hideLabel?boolean
Hides the tooltip's label, the hovered point's.
- Default
false
indicator?"dashed" | "dot" | "line"
The color indicator's shape: a dot, a line or dashed.
- Type
"dashed" | "dot" | "line"- Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode
Formats the tooltip's label; its value is untyped, as in recharts 3.8.
- Type
(label: any, payload: TooltipPayload) → React.ReactNode- Parameters
label– anypayload– TooltipPayload- Returns
React.ReactNode
labelKey?string
The key in the data to read the label from, looked up in config.
nameKey?string
The key in each item's data to look its name up by in config.
className?string
Merged with the part's classes.
Related
Pie Chart with Label List
Pie chartsEach slice's name printed inside it.
Pie Chart
Pie chartsA plain pie, one slice per browser.
Area Chart with Legend
Area chartsStacked areas with a legend naming each series.
Stacked Bar Chart with Legend
Bar chartsTwo series stacked in each bar, with a legend.
Radar Chart with Legend
Radar chartsTwo radar series with a legend naming them.
Pie Chart with Labels
Pie chartsEach slice's value printed beside it.