shadcn.io is not affiliated with official shadcn/ui
About
Use it when labels should say exactly what you want: a count, a share, a unit, or nothing at all for a sliver. Without leader lines the pie looks lighter than the Pie Chart with Labels; with very thin slices, keep the lines so each number points somewhere.
Five browser slices, each with its visitor count written just outside the rim in the page's text color. Labels on the left are right-aligned and labels on the right left-aligned, so none runs back over the pie.
Installation
Usage
import { ChartPieLabelCustom } from "@/components/charts/chart-pie-label-custom";<ChartPieLabelCustom />Customize
label={({ payload, ...props }) => <text … />}on<Pie>renders each label at the position Recharts computes, withpayload.visitorsas the text.labelLine={false}removes the lines the default label draws.fill="var(--foreground)"on the<text>follows the theme.<ChartTooltipContent hideLabel nameKey="visitors" />names each row "Visitors".
FAQ
How are the labels drawn?
label on <Pie> is a function: it gets each sector's position (x, y, textAnchor, dominantBaseline) and its payload, and returns a <text> with payload.visitors in var(--foreground).
How is it different from the Pie Chart with Labels?
The Pie Chart with Labels uses Recharts' default label and its lines. Here label is your own function and labelLine={false} turns the lines off.
What can the label say?
Anything the payload has: payload.browser, a share computed from the total, a unit. Return null from the function to skip small sectors.
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 Labels
Pie chartsEach slice's value printed beside it.
Pie Chart with Label List
Pie chartsEach slice's name printed inside it.
Line Chart with Custom Labels
Line chartsEach point labeled with its category's name, in its color.
Bar Chart with Custom Labels
Bar chartsHorizontal bars with the name inside each bar and the value after it.
Pie Chart
Pie chartsA plain pie, one slice per browser.
Pie Chart with Legend
Pie chartsA pie with a legend of its slices underneath.