I’m working on a stacked bar chart using Recharts, and I need to implement a reverse overlapping effect. The goal is for each bar section to overlap the one below it within the same stack, starting from the top section and overlapping with the section directly beneath it.

I’ve tried adjusting the bar rendering logic, but I’m having trouble getting the overlap to work as intended, especially in reverse order.

Here’s the current code I’m using:

import React, { PureComponent } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  { 
    name: 'Bar',
    section1: 25, // Dark navy/blue section (top)
    section2: 25, // Light gray section
    section3: 25, // Medium gray section
    section4: 25  // Dark gray section (bottom)
  }
];

export default class Example extends PureComponent {
  // This custom shape creates the overlapping effect
  renderCustomBar = (props) => {
    const { x, y, width, height, fill, dataKey } = props;
    const overlapHeight = 10; // Amount of overlap
    
    
    // Top section (section1) - rounded top and overlap at bottom
    if (dataKey === "section1") {
      return (
        <g>
          {/* Main section with rounded top corners */}
          <rect 
            x={x} 
            y={y} 
            width={width} 
            height={height + overlapHeight} // Extend to overlap section below
            fill={fill} 
            rx={18} 
            ry={18} 
          />
        </g>
      );
    }
    if (["section1", "section2", "section4", "section3"].includes(dataKey)) {
  return (
    <g>
      {/* Main section with rounded bottom corners (sad curve) */}
      <rect 
        x={x} 
        y={y} 
        width={width} 
        height={height + overlapHeight} // Extend to overlap section below
        fill={fill} 
        rx={18}
        ry={18} 
        transform={`translate(0, -${overlapHeight})`} // Adjust positioning for overlap effect
      />
    </g>
  );
}


    // Middle sections - create overlap with section below
    return (
      <rect 
        x={x} 
        y={y} 
        width={width} 
        height={height + overlapHeight} // Extend to overlap section below
        fill={fill} 
      />
    );
  };

  render() {
    return (
      <ResponsiveContainer width="100%" height={300}>
        <BarChart
          data={data}
          margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
          barGap={0}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />

          {/* Rendering sections from bottom to top */}
          <Bar
            dataKey="section4"
            stackId="a"
            fill="#4B5563" 
            barSize={60}
            shape={this.renderCustomBar}
          />
          
          <Bar
            dataKey="section3"
            stackId="a"
            fill="#9CA3AF"
            barSize={60}
            shape={this.renderCustomBar}
          />
          
          <Bar
            dataKey="section2"
            stackId="a"
            fill="#E5E7EB"
            barSize={60}
            shape={this.renderCustomBar}
          />
          
          <Bar
            dataKey="section1"
            stackId="a"
            fill="#121638"
            barSize={60}
            shape={this.renderCustomBar}
          />
        </BarChart>
      </ResponsiveContainer>
    );
  }
}

What I’m trying to achieve:

The overlap should happen from section 3 to section 4 (reversed from the original order).

Each bar should slightly overlap the section directly below it within the same stack.

Any guidance or suggestions on how to achieve this would be greatly appreciated!