shadcn.io is not affiliated with official shadcn/ui
About
Use it when one share is the point of the card: the browser you're optimizing for, the plan most people choose. The highlight is fixed in the data, not tied to hover, so it holds in a screenshot. If the reader should choose the slice, the Interactive Pie Chart adds a select.
It's the donut with a 60px hole. The first slice, Chrome, extends 10px past the others, so it stands out without a second color.
Installation
Usage
import { ChartPieDonutActive } from "@/components/charts/chart-pie-donut-active";<ChartPieDonutActive />Customize
<Pie shape={…}>renders each sector: the one atACTIVE_INDEXreturns<Sector outerRadius={outerRadius + 10} />, the rest their normal size.shapereplaces the deprecatedactiveShape; Recharts 3 passes itisActivetoo, if you'd rather grow the hovered sector.innerRadius={60}makes the hole.strokeWidth={5}widens an outlineChartContainermakes transparent, so it draws no seam.<ChartTooltipContent hideLabel />keeps the tooltip to one row per slice.
FAQ
How is the active slice drawn?
<Pie> takes a shape function. For the sector whose index equals ACTIVE_INDEX, it returns a <Sector> with outerRadius + 10; every other sector gets its normal outerRadius.
How do I make a different slice active?
Change ACTIVE_INDEX. It's the position in chartData, so 1 highlights Safari. To follow the data, compute the index of the largest visitors value instead of fixing it.
Can a click choose the active slice?
Store the active index in state and read it in shape. <Pie onClick={(_, index) => setActiveIndex(index)}> updates it; the Interactive Pie Chart does the same from a select.
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
Interactive Pie Chart
Pie chartsA donut whose active month is picked from a select.
Donut Chart
Pie chartsA pie with a hollow center: a donut.
Donut Chart with Text
Pie chartsA donut with the total written in its center.
Bar Chart with Active Bar
Bar chartsOne bar drawn as active, outlined and dashed, the rest plain.
Pie Chart without Separators
Pie chartsSlices drawn edge to edge, without the gaps between them.
Pie Chart
Pie chartsA plain pie, one slice per browser.