Custom function for shape not working with negative values.

[severinlandolt]

Hello there!

TL;DR:

In the BarChart, we use a custom function for the shape property within the <Bar /> component. This setup functions correctly for non-negative values. When negative values are involved, the shape doesn't display properly. This issue becomes apparent when hovering over the area where the bar should be rendered. Repro: https://github.com/severinlandolt/recharts-shape

CleanShot.2023-10-30.at.00.39.08.mp4

This is the custom render function that gets passed to <Bar shape={(props) => renderShape(props, activeBar, layout)}.../>

const renderShape = (props: any, activeBar: any | undefined, activeLegend: string | undefined) => {
  const { x, y, width, height, fillOpacity, name, payload, value } = props;

  return (
    <rect
      x={x}
      y={y}
      width={width}
      height={height}
      opacity={
        activeBar || (activeLegend && activeLegend !== name)
          ? deepEqual(activeBar, { ...payload, value })
            ? fillOpacity
            : 0.3
          : fillOpacity
      }
    />
  );
};

I tried to modify the function to take into account the negative values:

const renderShape = (
  props: any,
  activeBar: any | undefined,
  layout: string
) => {
  const { fillOpacity, payload, value } = props
  let { x, width, y, height } = props

+  // Layout fix
+  if (value < 0) {
+    if (layout === 'horizontal') {
+      y += height
+      height = Math.abs(height) // height must be a positive number
+    } else if (layout === 'vertical') {
+      x += width
+      width = Math.abs(width) // width must be a positive number
+    }
+  }

  return (
    <rect
      x={x}
      y={y}
      width={width}
      height={height}
      opacity={
        activeBar
          ? deepEqual(activeBar, { ...payload, value })
            ? fillOpacity
            : 0.3
          : fillOpacity
      }
    />
  )
}

This works as expected

CleanShot.2023-10-30.at.00.44.59.mp4

But adding new props such as stacked or relative, is not working for the bar calculation. E.g.

CleanShot.2023-10-30.at.00.49.00.mp4

I am wondering if I have to add all logic to renderShape that is usually handled by recharts under the hood. Maybe the renderShape approach to conditionally apply opacity is the wrong solution in the first place? Any help is deeply appreciated 🙏:skin-tone-2:

Reproduction here: https://github.com/severinlandolt/recharts-shape

[ckifer]

@severinlandolt does this happen before 2.9 as well?

[ckifer]

@andrewangelle you might be interested in this

[severinlandolt]

Hey @ckifer, just tested 2.8.0 → Same issue

[andrewangelle]

Related?: #2009

Please correct me if I'm wrong, but at first glance I think this might be expected behavior. According to the SVG spec, a negative value for width/height is "invalid and must be ignored".
Sources:

• https://svgwg.org/svg2-draft/shapes.html#RectElement
• https://developer.mozilla.org/en-US/docs/Web/API/SVGRect

In chrome, React throws an error for this in the development build when it attempts to define this attribute on the rect svg element.

Since your custom render prop is the one returning the <rect /> then I believe your "fixed" variant would be the correct way to handle in this particular example.

[severinlandolt]

Exactly, there cannot be a negative height/width.

The thing I'm wondering about is:

Given props such as stackId and stackOffset that cause some x or y shift in the placement of a Bar. The solution of providing positive values fails when using a custom renderShape.

I will dig deeper and report on my findings! Thanks for the discussion so far 🙌🏻

[severinlandolt]

I think i got it working, this is the check I had to add to the renderShape function:

const renderShape = (
  props: any,
  activeBar: any | undefined,
  layout: string
) => {
  const { fillOpacity, payload, value } = props
  let { x, width, y, height } = props

  if (layout === 'horizontal' && height < 0) {
    y += height
    height = Math.abs(height) // height must be a positive number
  } else if (layout === 'vertical' && width < 0) {
    x += width
    width = Math.abs(width) // width must be a positive number
  }

  return (
    <rect
      x={x}
      y={y}
      width={width}
      height={height}
      opacity={
        activeBar
          ? deepEqual(activeBar, { ...payload, value })
            ? fillOpacity
            : 0.3
          : fillOpacity
      }
    />
  )

The only thing that makes me think. Should it be possible at all to receive negative height and width by the props?

[ckifer]

Probably not @severinlandolt - we should most likely throw an invariant error at the user when they do this to warn them. That would be a breaking change though, so something for later. We may be able to do the calculations done internally earlier, but I'm willing to bet they are completed in the component that is replaced by this.