Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Pie Chart with Label List

A pie with each browser's name printed inside its own slice in the background color, so the chart needs no legend. For React on Recharts.

Framework
Charting library

Preview

Preview width

About

Use it when the slices are big enough to hold a word and you'd rather not spend space on a legend. It keeps the card compact, which suits small dashboard tiles. With six or more slices, or long names, the Pie Chart with Legend reads better.

Five slices, each with its browser name centered inside it, set in the background color so the text reads on every chart color.

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 { ChartPieLabelList } from "@/components/charts/chart-pie-label-list";
<ChartPieLabelList />

Customize

  • <LabelList dataKey="browser" formatter={…} /> inside <Pie> writes one name per sector, looked up in chartConfig.
  • className="fill-background" and stroke="none" style the text; fontSize={12} keeps it small.
  • [&_.recharts-text]:fill-background on ChartContainer covers Recharts' text elements too.
  • <ChartTooltipContent hideLabel nameKey="visitors" /> shows the count on hover.

FAQ

How are the names placed inside the slices?

<LabelList dataKey="browser" /> inside <Pie> places one label per sector, centered in it. fontSize={12} and stroke="none" keep the text small and clean.

Where do the capitalized names come from?

formatter on <LabelList> maps each browser value to chartConfig[value].label, so the sector shows "Chrome", not "chrome".

How do the labels stay readable on colored slices?

className="fill-background" on <LabelList>, and [&_.recharts-text]:fill-background on ChartContainer, paint the text in the background token so it contrasts with the sectors.

What about slices too small for a label?

Give <LabelList> a formatter that returns an empty string for small values, or group them into one other row in chartData.

What does the tooltip add?

<ChartTooltipContent hideLabel nameKey="visitors" />: one row, "Visitors" and the count, under the browser name already on the sector.

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