Conditionally put border-radius on Bar in recharts

user_10010352 0
Viewed 1502

I have an issue with the BarChart Stacked component from Recharts. I don't want to have this whitespace between these two bars.

enter image description here

I tried to add a conditional rendering with the Cell component, but there is no radius property.

<Bar dataKey="savedGain" stackId="a" fill="url(#colorUv_blue)" 
     name="Secured gain with AB Tasty" stroke={false} 
     barSize={20} radius={[25, 25, 0, 0]} strokeWidth={4} />

<Bar dataKey="gain" stackId="a" fill="url(#colorUv_turquoise)" 
     name="Uplift with AB Tasty" stroke={false} 
     barSize={20} strokeWidth={4} radius={[25, 25, 0, 0]} barCategoryGap={0} />

Feel free to edit.

EDIT: I tried the following tuto, but i can't modify the border radius..

recharts reactjs
2 Answers

if you pass a prop in then you could conditionally render like this:

radius={props.shouldHaveBorderRadius ? [25, 25, 0, 0] : [0, 0, 0, 0]}

this is saying if props.shouldHaveBorderRadius is true then use [25, 25, 0, 0], if it's false then use [0, 0, 0, 0]

obviously you need to define the logic behind this: props.shouldHaveBorderRadius

user_107953480

Good news! You finally can do it in 2022. This code worked for me, but i got typescript issue so need to use ts-ignore because it typed as number | string | undefined.

<Bar
   stackId="a"
   dataKey={item.key}
   fill={colors[index]}
   >
    {data.map((entry, i) => {
      const isRadius = index || !entry[requestResults[1].key];
       return (
       // @ts-ignore
       <Cell key={`cell-${index}`} radius={isRadius ? [8, 8, 0, 0] : undefined} />
         );
       })}
  </Bar>

user_132210360
Related