For me I tried use shape property from Bar
interface PaddedBarProps extends RectangleProps {
x?: number;
y?: number;
width?: number;
height?: number;
fill?: string;
payload?: unknown[];
index?: number;
}
const PaddedBar = ({
x = 0,
y = 0,
width = 0,
height = 0,
fill,
payload,
index,
}: PaddedBarProps): React.ReactElement => {
const gap = 2; // px
const isLast = index === (payload?.length ?? 0) - 1;
return (
<rect
x={x}
y={y + (isLast ? 0 : gap)}
width={width}
height={height - (isLast ? 0 : gap)}
fill={fill}
/>
);
};
//usage
<Bar
dataKey='recycledLog'
name={LABELS.RECYCLE}
fill={COLORS.RECYCLE}
stackId={"weight"}
shape={<PaddedBar />}
/>
<Bar
dataKey='nonRecycledLog'
radius={[2, 2, 0, 0]}
stackId={"weight"}
name={LABELS.NON_RECYCLE}
fill={COLORS.NON_RECYCLE}
/>
Result:
Source: https://github.com/recharts/recharts/issues/2244#issuecomment-2288572842