Custom Label Pie Chart

Display categorical data with fully customizable label rendering and no connecting lines. Perfect for React applications requiring advanced label control 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 custom 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 ChartPieLabelCustom() {  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 - Custom 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="aspect-square w-80 h-80"        >          <PieChart>            <ChartTooltip              content={<ChartTooltipContent nameKey="visitors" hideLabel />}            />            <Pie              data={chartData}              dataKey="visitors"              labelLine={false}              label={({ payload, ...props }) => {                return (                  <text                    cx={props.cx}                    cy={props.cy}                    x={props.x}                    y={props.y}                    textAnchor={props.textAnchor}                    dominantBaseline={props.dominantBaseline}                    fill="currentColor"                    className="fill-foreground"                  >                    {payload.visitors}                  </text>                )              }}              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-04.json

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

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

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

Features

Custom label rendering with full control over text positioning and styling
No label lines removing connecting lines between labels and segments
Theme-aware text color using HSL CSS variables for proper contrast
Advanced positioning with precise control over label placement
TypeScript support with complete type definitions for custom label functions
shadcn/ui integration using Chart and tooltip components without background

Use Cases

This free open source React component works well for:

Custom label designs - Create unique label styles beyond default rendering built with Next.js
Clean presentations - Display data without visual clutter from label lines using TypeScript and Tailwind CSS
Branded visualizations - Apply specific styling requirements for corporate designs
Advanced dashboards - Implement sophisticated label positioning and formatting

API Reference

ChartPieLabelCustom

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

Custom Label Implementation

The key feature is the custom label function with labelLine={false}:

<Pie
  data={chartData}
  dataKey="visitors"
  labelLine={false}
  label={({ payload, ...props }) => {
    return (
      <text
        cx={props.cx}
        cy={props.cy}
        x={props.x}
        y={props.y}
        textAnchor={props.textAnchor}
        dominantBaseline={props.dominantBaseline}
        fill="hsla(var(--foreground))"
      >
        {payload.visitors}
      </text>
    )
  }}
  nameKey="browser"
/>

Implementation Notes

Custom label function receives position props and payload data
Uses hsla(var(--foreground)) for theme-aware text color
labelLine={false} removes connecting lines for cleaner appearance
Full control over text positioning using cx, cy, x, y coordinates
Perfect for implementing custom label formatting or styling
Maintains all standard pie chart interactivity and tooltips

Custom Label Pie Chart

Reactpie-chart-04

On this page