Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Pie Chart without Separators

A pie whose slices meet edge to edge with no seams: a solid disc for when the colors alone tell the parts apart. For React on Recharts.

Framework
Charting library

Preview

Preview width

About

Use it when the slice colors contrast enough to stand on their own and you want the pie to read as one solid shape. With similar colors or many small slices, keep the separators of the plain pie.

Five browser slices fill the disc edge to edge, with no outline drawn between them: each boundary is just the meeting of two colors.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { ChartPieSeparator } from "@/components/charts/chart-pie-separator";
<ChartPieSeparator />

Customize

  • <Pie data={chartData} dataKey="visitors" nameKey="browser" stroke="0" />: stroke="0" drops the sector outlines.
  • Recharts' default outline is white, and ChartContainer turns that exact stroke transparent; setting stroke yourself overrides both.
  • For a visible seam, stroke="var(--background)" with a strokeWidth; for space, paddingAngle.
  • <ChartTooltip content={<ChartTooltipContent hideLabel />} cursor={false} /> is unchanged from the plain pie.

FAQ

How are the separators removed?

stroke="0" on <Pie> replaces the default sector outline, so neighbors meet with no edge drawn between them.

When should I keep the separators?

Keep the seam when two neighbors have similar colors, or when the slices are small: the line is what tells them apart. Remove it when the colors contrast well and you want a calmer disc.

Can I have a different gap instead?

Set stroke="var(--background)" and strokeWidth on <Pie> for a theme-colored seam, or paddingAngle for empty space between sectors.

Two neighboring slices blend together. What now?

Reorder chartData so similar colors aren't side by side, or change those entries' colors in chartConfig.

Does anything else change?

No. The tooltip (hideLabel, no cursor) and the colors are the plain pie's; only stroke changes.

API Reference

ChartContainer

PropType
configChartConfig

Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.

initialDimension?{ height: number; width: number; }

The size it renders at before it's measured, so the first paint isn't * empty.

Type
{ height: number; width: number; }
Default
INITIAL_DIMENSION
className?string

Merged with the part's classes.

ChartLegend

ChartLegendContent

<div>

PropType
hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default
false
nameKey?string

The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.

className?string

Merged with the part's classes.

ChartStyle

<style>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
hideIndicator?boolean

Hides each item's color indicator.

Default
false
hideLabel?boolean

Hides the tooltip's label, the hovered point's.

Default
false
indicator?"dashed" | "dot" | "line"

The color indicator's shape: a dot, a line or dashed.

Type
"dashed" | "dot" | "line"
Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode

Formats the tooltip's label; its value is untyped, as in recharts 3.8.

Type
(label: any, payload: TooltipPayload) → React.ReactNode
Parameters

label – any

payload – TooltipPayload

Returns
React.ReactNode
labelKey?string

The key in the data to read the label from, looked up in config.

nameKey?string

The key in each item's data to look its name up by in config.

className?string

Merged with the part's classes.

All 70 charts