79731745

Date: 2025-08-11 07:03:57
Score: 0.5
Natty:
Report link

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:

enter image description here

Source: https://github.com/recharts/recharts/issues/2244#issuecomment-2288572842

Reasons:
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Hem Pun