Label List Pie Chart

Display categorical data with formatted labels showing browser names directly on segments. Perfect for React applications requiring enhanced label presentation with Next.js integration and TypeScript support.

Recharts

Loading component...

"use client"import { TrendingUp } from "lucide-react"import { LabelList, Pie, PieChart } from "recharts"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "A pie chart with a label list"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 ChartPieLabelList() {  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 List</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-text]:fill-background aspect-square w-80 h-80"        >          <PieChart>            <ChartTooltip              content={<ChartTooltipContent nameKey="visitors" hideLabel />}            />            <Pie data={chartData} dataKey="visitors">              <LabelList                dataKey="browser"                className="fill-background"                stroke="none"                fontSize={12}                formatter={(value) =>                  chartConfig[value as keyof typeof chartConfig]?.label                }              />            </Pie>          </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-05.json

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

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

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

Features

LabelList component displaying formatted browser names on each segment
Background contrast labels using background color for optimal readability
Custom label formatting with configurable formatter function for label display
Responsive typography with adjustable font size and styling options
TypeScript support with complete type definitions for label configuration
shadcn/ui integration using Chart and tooltip components without background

Use Cases

This free open source React component works well for:

Branded visualizations - Display category names clearly on each segment built with Next.js
Educational dashboards - Show data with immediate category identification using TypeScript and Tailwind CSS
Report presentations - Present statistics with prominent category labels
User-friendly analytics - Provide clear segment identification without requiring hover

API Reference

ChartPieLabelList

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

LabelList Implementation

The key feature is the LabelList component with custom formatting:

<Pie data={chartData} dataKey="visitors">
  <LabelList
    dataKey="browser"
    className="fill-background"
    stroke="none"
    fontSize={12}
    formatter={(value: keyof typeof chartConfig) =>
      chartConfig[value]?.label
    }
  />
</Pie>

Implementation Notes

LabelList uses fill-background class for contrast against segment colors
Custom formatter function maps browser keys to display labels
Font size set to 12px for optimal readability on segments
No stroke applied to labels for cleaner appearance
Formatter ensures type safety with TypeScript key mapping
Labels automatically position themselves within segment boundaries

Label List Pie Chart

Reactpie-chart-05

On this page