How to turn off background hover for bar charts with Recharts?

Sometimes, we want to turn off background hover for bar charts with Recharts.

In this article, we’ll look at how to turn off background hover for bar charts with Recharts.

How to turn off background hover for bar charts with Recharts?

To turn off background hover for bar charts with Recharts, we can set the cursor prop of the Tooltip component to false.

For instance, we write:

import React from "react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from "recharts";

const data = [
  { name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
  { name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
  { name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
  { name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
  { name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
  { name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
  { name: "Page G", uv: 3490, pv: 4300, amt: 2100 }
];

const SimpleBarChart = () => {
  return (
    <BarChart
      width={600}
      height={300}
      data={data}
      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip cursor={false} />
      <Legend />
      <Bar dataKey="pv" fill="#8884d8" />
      <Bar dataKey="uv" fill="#82ca9d" />
    </BarChart>
  );
};

export default function App() {
  return <SimpleBarChart />;
}

We define the SimpleBarChart component that renders the BarChart component.

We set the data prop to data to render the data array’s entries in the bar chart.

And we render the x-axis with the XAxis component.

The dataKey prop is set to 'name' to take the name property of each entry as the x-axis values.

We add the bars with the Bar component and we set the dataKey prop to the name of the property with the values we want to render as the bar heights.

Finally, we add the Tooltip component to add the tooltips that are shown when we hover over each bar.

And we set the cursor prop to false to disable highlighting the background when we hover over a bar.

Conclusion

To turn off background hover for bar charts with Recharts, we can set the cursor prop of the Tooltip component to false.