Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Interactive Pie Chart

A donut where a select picks the month: its slice grows, an outer ring wraps it and the center shows its count. Interactive, for React on Recharts.

Framework
Charting library

Preview

Preview width

About

Use it when a card should answer one question at a time: what was May's share? The reader picks a month and the donut highlights that slice and prints its value. When all values matter at once, a labeled pie or a bar chart shows them without a control.

Five monthly slices sit on a ring. The selected month's slice extends past the others, a thin band of the same color wraps it, and the center shows its count above "Visitors".

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { ChartPieInteractive } from "@/components/charts/chart-pie-interactive";
<ChartPieInteractive />

Customize

  • activeMonth state comes from <Select onValueChange>; activeIndex is derived with useMemo.
  • <Pie shape={renderPieShape}> draws the active sector as two <Sector>s, one 10px longer and one band from 12px to 25px out.
  • The <Label> prints desktopData[activeIndex].desktop in the center.
  • <ChartStyle config={chartConfig} id={id} /> on the card exposes the month colors to the select, outside ChartContainer.

FAQ

How does the select drive the chart?

activeMonth is React state that the <Select>'s onValueChange sets. activeIndex is derived from it, and the shape function on <Pie> reads it to draw the active sector.

How are the bigger slice and the outer ring drawn?

The shape function returns a <g> for the active index with two <Sector>s: one with outerRadius + 10, one from outerRadius + 12 to outerRadius + 25. Other sectors render normally.

What sets the number in the middle?

The <Label> inside <Pie> prints desktopData[activeIndex].desktop at the viewBox center, so it follows the select.

How do the select's swatches match the slices?

The card renders <ChartStyle config={chartConfig} id={id} /> and carries data-chart={id}, so the --color-<month> variables reach the select outside ChartContainer. Each <SelectItem> draws a span with backgroundColor: var(--color-<month>).

Does it work without a mouse?

The select is fully keyboard-operable and has an aria-label. Hovering slices still shows their tooltip; the highlight only follows the select.

Can I use buttons instead of a select?

Yes. Map the months to buttons that call setActiveMonth, or set it from <Pie onClick={(_, index) => …}> to pick a slice by clicking it.

API Reference

ChartContainer

PropType
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>

PropType
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>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
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 – any

payload – 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.

All 70 charts