Assigned fill to selected bar using 'cell' disappears when you move the brush

Hi,

I’m using the bar chart with brush. The selected bar is assigned a different fill using the <Cell/> method but whenever I move zoom in with the brush, the highlighted attribute is no longer in effect. It is literally only effective when I don’t use the brush… If anyone could give me an insight or any kind of explanation on what is going on, I would greatly appreciate it.

This is the line of my <Cell />: {data.map((entry, index) => ( <Cell cursor="pointer" key={cell-${index}} fill={entry.ID === selectedAgglos ? '#c95d47' : 'lightgrey' }/> ))}

Thank you

[shahinlotfi]

I was having the same issue. Here’s how I solved it, using a custom shape.

  const CustomBar = (props) => {
    const { vibration } = props

    // Don't forget to import Rectangle

    return (
      <Rectangle
        {...props}
        fill={
          vibration <= 25  ? '#FF0000' : '#00FF00'
        }
      />
    )
  }

Usage:

<Bar shape={CustomBar} dataKey="vibration" name="Vibration" />

[Andyyyyyy]

I stumbled across this problem myself, in my case I wanted to have one particular bar in a different color.

I managed to solve this by keeping track of the startIndex and then calculating the correct index when the brush changes. index === activeIndex - startIndex

This might be trivial but could save some time for anyone who also comes across this issue.

https://codesandbox.io/s/recharts-brush-with-custom-cell-fix-4ck18?file=/src/App.tsx