Overlapping / layered segments in PieChart(donut)

[romatr1x]

Hi everyone

I am using Recharts along with shadcn/ui chart wrappers to create a pie chart and am trying to achieve the effect of overlapping/layering segments.

Visually, the goal looks something like this:

each segment of the pie chart slightly overlaps the next one.

the overlap is visible at the segment boundaries

I tried using prop paddingAngle with a negative value, but it doesn't give the proper result.

Is there an official or recommended way in Recharts to implement overlapping/layered pie chart segments?

Any tips, examples, or hints would be very helpful.
Thanks!

[krishparmar22242]

Creating an overlapping or layered effect in Recharts (especially within shadcn/ui chart wrappers) is a common design request that can't be achieved with standard props like paddingAngle. Negative padding values often lead to broken SVG paths.

The "proper" way to solve this is by using a Custom Shape for the Pie sectors. By creating a custom component that renders a Sector with a slightly extended endAngle, you can force the segments to bleed into each other.

The Solution: Custom Overlapping Sector

You need to define a renderOverlappingSector function and pass it to the shape prop of your Pie component.

1. Implementation Code

import { Pie, PieChart, Sector, Cell, ResponsiveContainer } from "recharts"

const renderOverlappingSector = (props: any) => {
  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill, payload } = props
  
  // The "Overlap" Logic: 
  // We extend the endAngle by a few degrees to create the overlap.
  // We also add a cornerRadius to get those smooth rounded ends.
  const OVERLAP_DEGREE = 15; 

  return (
    <g>
      {/* Adding a drop shadow filter makes the "layering" pop */}
      <defs>
        <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="2" dy="2" stdDeviation="3" floodOpacity="0.3" />
        </filter>
      </defs>
      <Sector
        {...props}
        endAngle={endAngle + OVERLAP_DEGREE} // This creates the overlap
        cornerRadius={innerRadius} // Creates the rounded look
        stroke={fill} 
        strokeWidth={2}
        style={{ filter: "url(#shadow)" }} // Apply the layered shadow
      />
    </g>
  )
}

// Inside your main Chart component
export function OverlappingDonut({ data }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <PieChart>
        <Pie
          data={data}
          cx="50%"
          cy="50%"
          innerRadius={60}
          outerRadius={80}
          dataKey="value"
          shape={renderOverlappingSector} // Use the custom shape here
          stroke="none"
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={entry.fill} />
          ))}
        </Pie>
      </PieChart>
    </ResponsiveContainer>
  )
}

Since you are using shadcn/ui chart wrappers, you can simply add the shape={renderOverlappingSector} prop to the <Pie /> component inside your ChartContainer. shadcn/ui is just a wrapper around Recharts, so all the underlying SVG math remains the same.

If this custom sector approach helps you achieve that layered donut look, please consider marking this as the accepted answer to help other UI developers in the community!

[romatr1x]

hello bro , thank you so much for answer my question. But Pie component dont have prop shape , what i can taste more for same effect with overlapping

[krishparmar22242]

sorry for the late answering your reply

Since the Pie component does not support the shape prop directly, we use the "All-Active" strategy. We pass our custom rendering logic to activeShape and then tell Recharts to treat every slice as "active" simultaneously using an array of indices. This forces every segment to use our custom overlapping logic.

Implementation Code

import React from "react"
import { Pie, PieChart, Sector, ResponsiveContainer } from "recharts"

// 1. Create the Custom Sector component with Overlap Logic
const renderOverlappingSector = (props: any) => {
  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props
  
  // We extend the endAngle by 12 degrees to create the "under-lap" effect
  const OVERLAP_OFFSET = 12; 

  return (
    <g>
      {/* 2. Define a Shadow Filter for the Layered Look */}
      <defs>
        <filter id="overlap-shadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="1" dy="1" stdDeviation="3" floodOpacity="0.4" />
        </filter>
      </defs>
      <Sector
        {...props}
        endAngle={endAngle + OVERLAP_OFFSET} // The overlap happens here
        cornerRadius={10} // Creates the smooth "pill" ends
        stroke={fill} // Optional: adds a slight border to define edges
        strokeWidth={1}
        style={{ filter: "url(#overlap-shadow)" }} // Applies the depth
      />
    </g>
  )
}

// 3. Your Main Chart Component
export function OverlappingDonut({ data }) {
  // Create an array of all indices [0, 1, 2, ...] to make all segments "active"
  const allActiveIndices = data.map((_, index: number) => index);

  return (
    <div className="h-[300px] w-full">
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            innerRadius={60}
            outerRadius={80}
            dataKey="value"
            stroke="none"
            // --- THE CORE FIX ---
            activeShape={renderOverlappingSector} 
            activeIndex={allActiveIndices}
            // --------------------
          />
        </PieChart>
      </ResponsiveContainer>
    </div>
  )
}

This should be the correct approach because:
activeShape: This is the correct prop for Pie when you want to override the default SVG path logic. It gives you access to the underlying Sector component.
activeIndex: By passing an array of all indices, you bypass the standard "hover to highlight" behavior and instead force the chart to render the entire pie using your custom layered design.
SVG Layering: SVG renders elements in order. By extending the endAngle, each slice will naturally render slightly "underneath" the beginning of the next slice, creating that beautiful layered effect you see in the reference image.

I hope this corrected code gets your donut chart looking exactly how you envisioned! If this "All-Active" workaround solves the issue, please consider marking this as the accepted answer!