title: Recharts, Change the background color of bar in bar graph on hover
body: <p>Image of currently what is working</p>
  <p><a href="https://i.stack.imgur.com/cey8j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cey8j.png" alt="enter image description here" /></a></p>
  <p>Image of what is required</p>
  <p><a href="https://i.stack.imgur.com/Ujghy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ujghy.png" alt="enter image description here" /></a></p>
  <p>Currently on hovering the graph the color is changing but when I am hovering above the bar the tooltip comes but my bar graph is not filling with the selected color. Is their a way to do that in recharts.
  I am adding a code that will make it easy to understand. Thank you in advance.</p>
  <pre><code>const [activeBarIndex, setActiveBarIndex] = useState();
  
  &lt;ResponsiveContainer width={&quot;100%&quot;} height={400}&gt;
      &lt;ComposedChart
        data={data}
        barCategoryGap={0}
        margin={{
          top: 20,
          right: 20,
          bottom: 20,
          left: 20,
        }}
      &gt;
        &lt;CartesianGrid strokeOpacity={0} /&gt;
        &lt;XAxis dataKey=&quot;name&quot; hide /&gt;
        &lt;YAxis hide /&gt;
        &lt;Tooltip
          active={false}
          viewBox={{ x: 0, y: 0, width: 400, height: 400 }}
          content={&lt;CustomTooltip /&gt;}
        /&gt;
        {trancheLines[selectedLine ? 0 : 1]}
        {trancheLines[!selectedLine ? 0 : 1]}
        &lt;Bar
          size={20}
          dataKey=&quot;barGraph&quot;
          onMouseEnter={(_, index) =&gt; setActiveBarIndex(index)}
          onMouseLeave={() =&gt; setActiveBarIndex()}
          isAnimationActive={false}
        &gt;
          {data.map((entry, index) =&gt; (
            &lt;Cell
              cursor=&quot;pointer&quot;
              fill={index === activeBarIndex ? primaryColor : secondaryColor}
              key={entry.id}
            /&gt;
          ))}
        &lt;/Bar&gt;
      &lt;/ComposedChart&gt;
    &lt;/ResponsiveContainer&gt;
  </code></pre>