Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Pie Chart

A plain pie, one slice per browser sized by its share of visitors. The base for any parts-of-a-whole chart in React, drawn with Recharts.

Framework
Charting library

Preview

Preview width

About

Use a pie when a handful of parts add up to one total and the reader wants the biggest share at a glance. Past six or seven slices the small ones blur; a horizontal bar chart ranks them better. When you want a total in the middle, use the donut.

Five slices run counterclockwise from three o'clock, Chrome first, each in its own chart color. Nothing is written on the pie: hovering a slice shows its browser and 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 { ChartPieSimple } from "@/components/charts/chart-pie-simple";
<ChartPieSimple />

Customize

  • <Pie data={chartData} dataKey="visitors" nameKey="browser" /> inside <PieChart> draws one sector per row.
  • Each row's fill colors its sector; ChartContainer defines the --color-<browser> variables from chartConfig.
  • <ChartTooltip content={<ChartTooltipContent hideLabel />} cursor={false} /> shows the browser and count with no title.
  • startAngle and endAngle move the start; Recharts' 0 is three o'clock, counterclockwise.

FAQ

How many slices can a pie take?

Five to seven read well. Past that, the small slices get too thin to compare or to hover. Group the smallest into an other row, as this data does, or switch to a horizontal bar chart.

How do I color the slices?

Each row's fill, such as var(--color-chrome), colors its sector, and chartConfig.chrome.color defines that variable. Add a row and a matching config entry for a new slice.

How do I start the pie at twelve o'clock?

Set startAngle={90} and endAngle={-270} on <Pie>. Recharts measures degrees counterclockwise from three o'clock, so this starts at twelve and runs clockwise.

How do I sort the slices by size?

Recharts draws the rows in order, so sort chartData by visitors before passing it to <Pie>.

Pie or bar chart?

For parts of one total, when the biggest share is the message. To compare values, or rank more than a handful, bars are easier to read: lengths compare better than angles.

Can I reach the slices with the keyboard?

<Pie> is focusable (rootTabIndex defaults to 0), but Recharts' arrow-key tooltip walks an axis and a pie has none. Name the slices in text as well, with a legend or labels.

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