Seamless Pie Chart

Display categorical data with seamless segments and no dividing lines. Perfect for React applications requiring clean 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 no separator"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 ChartPieSeparatorNone() {  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 - Separator None</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"              stroke="0"            />          </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-02.json

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

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

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

Features

Seamless segment visualization with no separator lines between pie segments
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 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:

Clean data visualization - Display proportions without visual distractions built with Next.js
Modern dashboards - Present data with seamless, contemporary styling using TypeScript and Tailwind CSS
Minimalist designs - Show categorical data with reduced visual noise
Brand presentations - Create professional charts with smooth, uninterrupted segments

API Reference

ChartPieSeparatorNone

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 Difference

The main difference from the basic pie chart is the stroke="0" property:

<Pie
  data={chartData}
  dataKey="visitors"
  nameKey="browser"
  stroke="0"  // Removes separator lines
/>

Implementation Notes

Chart displays without visual separators between segments for cleaner appearance
Uses stroke="0" to remove default white lines between pie segments
Maintains same interactive functionality as standard pie chart
Perfect for modern, minimalist design systems
Colors are defined using CSS variables for consistent theming

Seamless Pie Chart

Reactpie-chart-02

On this page