Labeled Pie Chart

Display categorical data with visible segment labels showing values directly on the chart. Perfect for React applications requiring clear data visualization with Next.js integration and TypeScript support.

Recharts

Loading component...

"use client"import { TrendingUp } from "lucide-react"import { Pie, PieChart } from "recharts"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "A pie chart with a label"const chartData = [  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },  { browser: "other", visitors: 90, fill: "var(--color-other)" },]const chartConfig = {  visitors: {    label: "Visitors",  },  chrome: {    label: "Chrome",    color: "var(--chart-1)",  },  safari: {    label: "Safari",    color: "var(--chart-2)",  },  firefox: {    label: "Firefox",    color: "var(--chart-3)",  },  edge: {    label: "Edge",    color: "var(--chart-4)",  },  other: {    label: "Other",    color: "var(--chart-5)",  },} satisfies ChartConfigexport function ChartPieLabel() {  return (    <div className="w-full h-full flex flex-col p-4">      <div className="text-center mb-2">        <h3 className="text-lg font-semibold">Pie Chart - Label</h3>        <p className="text-sm text-muted-foreground">          January - June 2024        </p>      </div>      <div className="flex-1 flex items-center justify-center min-h-0">        <ChartContainer          config={chartConfig}          className="[&_.recharts-pie-label-text]:fill-foreground aspect-square w-80 h-80"        >          <PieChart>            <ChartTooltip content={<ChartTooltipContent hideLabel />} />            <Pie data={chartData} dataKey="visitors" label nameKey="browser" />          </PieChart>        </ChartContainer>      </div>      <div className="flex flex-col gap-1 text-sm text-center mt-2">        <div className="flex items-center justify-center gap-2 leading-none font-medium">          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />        </div>        <div className="text-muted-foreground flex items-center justify-center gap-2 leading-none">          Showing total visitors for the last 6 months        </div>      </div>    </div>  )}

Installation

npx shadcn@latest add https://www.shadcn.io/registry/pie-chart-03.json

npx shadcn@latest add https://www.shadcn.io/registry/pie-chart-03.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/pie-chart-03.json

bunx shadcn@latest add https://www.shadcn.io/registry/pie-chart-03.json

Features

Visible segment labels showing values directly on each pie slice
Interactive tooltips providing additional context on hover
Customizable label styling using CSS classes for foreground text color
Responsive design with aspect-square container and fixed dimensions
TypeScript support with complete type definitions for all chart props
shadcn/ui integration using Chart and tooltip components without background

Use Cases

This free open source React component works well for:

Detailed data presentation - Display exact values on each segment built with Next.js
Educational dashboards - Show data with immediate visibility using TypeScript and Tailwind CSS
Report visualizations - Present statistics with clear numerical labels
Business analytics - Highlight specific metrics with prominent value display

API Reference

ChartPieLabel

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the container

Chart Configuration

The component uses the same browser data configuration:

const chartConfig = {
  visitors: {
    label: "Visitors",
  },
  chrome: {
    label: "Chrome",
    color: "var(--chart-1)",
  },
  // ... additional segments
} satisfies ChartConfig

Key Features

The main difference is the label prop and label styling:

<ChartContainer
  config={chartConfig}
  className="[&_.recharts-pie-label-text]:fill-foreground aspect-square w-80 h-80"
>
  <PieChart>
    <Pie data={chartData} dataKey="visitors" label nameKey="browser" />
  </PieChart>
</ChartContainer>

Implementation Notes

Labels display visitor counts directly on each pie segment
Uses [&_.recharts-pie-label-text]:fill-foreground for proper text color theming
Labels automatically position themselves based on segment size and angle
Maintains interactivity with tooltips for additional information
Perfect for cases where immediate data visibility is crucial
Colors and label text follow theme-aware styling patterns

Reactpie-chart-03

On this page