shadcn.io is not affiliated with official shadcn/ui
About
Pick it when the chart has to stand on its own: a printed report, a slide, a screenshot. The counts sit on the chart, so nobody needs to hover. With many small slices the labels crowd each other; the legend version or a bar chart holds up better.
Each of the five slices has its count, 275 for Chrome down to 90 for Other, set just past the rim at the slice's middle, with a short leader line out to it.
Installation
Usage
import { ChartPieLabel } from "@/components/charts/chart-pie-label";<ChartPieLabel />Customize
<Pie data={chartData} dataKey="visitors" label nameKey="browser" />:labelalone prints each value outside its sector with a label line.[&_.recharts-pie-label-text]:fill-foregroundonChartContainercolors the label text from the theme.labelLineis on by default;labelLine={false}removes the lines.- The tooltip is
<ChartTooltipContent hideLabel />, one row per hovered sector.
FAQ
How are the labels and lines drawn?
label on <Pie> turns on Recharts' default labels: each sector's value outside it, joined by a label line, which labelLine controls and is on by default.
How do I move the labels?
The default label sits just outside each sector. For your own position or content, pass a function to label, as the Pie Chart with Custom Labels does, and set labelLine={false} to drop the line.
How do I show percentages instead of counts?
Pass a function to label on <Pie>: Recharts hands it each sector's percent, value and name, so returning (percent * 100).toFixed(0) + "%" prints percentages.
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 Custom Labels
Pie chartsSlice labels drawn outside the pie in the foreground color.
Pie Chart with Label List
Pie chartsEach slice's name printed inside it.
Pie Chart with Legend
Pie chartsA pie with a legend of its slices underneath.
Bar Chart with Labels
Bar chartsEach bar's value printed above it.
Pie Chart
Pie chartsA plain pie, one slice per browser.
Pie Chart without Separators
Pie chartsSlices drawn edge to edge, without the gaps between them.