shadcn.io is not affiliated with official shadcn/ui
About
Use it to compare two splits of the same categories, desktop against mobile or this year against last, when the shape of each split matters more than exact values. To compare totals per month, a grouped bar chart is clearer.
The desktop months fill a pie in the center; the mobile months form a ring around it, 10px out. Each month has one color on both, so you can follow January from the inside to the outside.
Installation
Usage
import { ChartPieStacked } from "@/components/charts/chart-pie-stacked";<ChartPieStacked />Customize
- Two
<Pie>s share the<PieChart>:desktopDatawithouterRadius={60},mobileDatawithinnerRadius={70}andouterRadius={90}. - Each row's
fill,var(--color-<month>), ties a month's color across both rings. labelFormatterreturnschartConfig[payload[0].dataKey].label, so the tooltip's title is Desktop or Mobile.indicator="line",nameKey="month"andlabelKey="visitors"set the rest of the tooltip.
FAQ
How are the two rings built?
Two <Pie>s in one <PieChart>: desktop with outerRadius={60}, mobile with innerRadius={70} and outerRadius={90}. The difference, 10px, is the gap between them.
How do matching months get the same color?
Each row of both arrays has fill: "var(--color-<month>)", so the same month gets the same color on both rings from one chartConfig entry.
How does the tooltip know which ring I'm on?
<ChartTooltipContent indicator="line" nameKey="month" labelKey="visitors" labelFormatter={…} />: the formatter reads the hovered dataKey (desktop or mobile) and returns its chartConfig label.
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
Donut Chart
Pie chartsA pie with a hollow center: a donut.
Stacked Radial Chart
Radial chartsTwo series stacked on a half ring, with their total.
Multiple Bar Chart
Bar chartsTwo series grouped side by side for each month.
Pie Chart
Pie chartsA plain pie, one slice per browser.
Multiple Radar Chart
Radar chartsTwo series overlaid on the same radar grid.
Pie Chart with Labels
Pie chartsEach slice's value printed beside it.