title: Recharts: Turn off background hover for bar charts
body: <p>Is there a way to turn off this gray background that appears on hover for bar charts in <a href="http://recharts.org/en-US" rel="noreferrer">Recharts</a>?</p>
  
  <p><a href="https://i.stack.imgur.com/dk5aC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dk5aC.png" alt="Screenshot of bar chart with gray background appearing behind bars."></a></p>
  
  <p>Using version 1.4.1. Code (simplified) looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react"
  
  // Recharts
  import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
  
  import CustomTooltip from "../CustomTooltip"
  
  const BarChart = ({ chartData, chartInfo }) =&gt; (
    &lt;ResponsiveContainer width="99%" height={260}&gt;
      &lt;BarChart data={chartData}&gt;
        &lt;XAxis
          dataKey="label"
          type="category"
          allowDuplicatedCategory={true}
          tickLine={false}
          orientation="bottom"
        /&gt;
  
        &lt;YAxis
          tickLine={false}
          orientation="left"
          axisLine={false}
        /&gt;
  
        &lt;Tooltip
          isAnimationActive={false}
          separator={": "}
          content={&lt;CustomTooltip /&gt;}
        /&gt;
  
        &lt;CartesianGrid vertical={false} /&gt;
  
        {chartInfo.map(bar =&gt; (
          &lt;Bar
            key={bar.dataKey}
            name={bar.name}
            dataKey={bar.dataKey}
            isAnimationActive={false}
          /&gt;
        ))}
      &lt;/BarChart&gt;
    &lt;/ResponsiveContainer&gt;
  )
  
  export default BarChart
  
  </code></pre>
  
  <p>I've poured over the <a href="http://recharts.org/en-US/api" rel="noreferrer">API docs</a> as well as looking through the source code. Doesn't seem to be a way to do it, but some of the demos have it disabled, like <a href="http://recharts.org/en-US/examples/CustomShapeBarChart" rel="noreferrer">this one</a>. </p>
  
  <p>I tried setting up mine with custom shapes like that demo and rendering with <code>Cell</code> instead of <code>Bar</code>, but the background was still there on hover. The background color is <code>#ccc</code> but searching the repository with that keyword yielded no clear methods or props to try to override or hook into.</p>