Simple Pie Chart

Display categorical data with proportional segments and tooltips. Perfect for React applications requiring 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 simple pie chart"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 ChartPieSimple() {  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</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              cursor={false}              content={<ChartTooltipContent hideLabel />}            />            <Pie data={chartData} dataKey="visitors" 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-01.json

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

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

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

Features

Proportional data visualization with automatically calculated segment sizes
Interactive tooltips showing values on hover with formatted display
Customizable colors using chart design tokens and CSS variables
Responsive design with aspect-square container and max height constraints
TypeScript support with complete type definitions for all chart props
shadcn/ui integration using Card, Chart, and tooltip components

Use Cases

This free open source React component works well for:

Analytics dashboards - Display user demographics or traffic sources built with Next.js
Financial reporting - Visualize budget allocation or expense categories using TypeScript and Tailwind CSS
Survey results - Show response distributions with clear visual representation
Market research - Present market share or competitive analysis data

API Reference

ChartPieSimple

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

Chart Configuration

The component uses a predefined configuration for browser data:

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

Implementation Notes

Chart automatically fits within aspect-square container with max height of 250px
Data structure requires browser, visitors, and fill properties
Colors are defined using CSS variables for consistent theming
Tooltip displays values without labels for cleaner presentation
Uses Recharts Pie component for rendering with shadcn/ui styling

Reactpie-chart-01