84
rated 0 times
[
85]
[
1]
/ answers: 1 / hits: 20029
/ 5 Years ago, wed, january 23, 2019, 12:00:00
Is there a way to turn off this gray background that appears on hover for bar charts in Recharts?
Using version 1.4.1. Code (simplified) looks like this:
import React from react
// Recharts
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from recharts
import CustomTooltip from ../CustomTooltip
const BarChart = ({ chartData, chartInfo }) => (
<ResponsiveContainer width=99% height={260}>
<BarChart data={chartData}>
<XAxis
dataKey=label
type=category
allowDuplicatedCategory={true}
tickLine={false}
orientation=bottom
/>
<YAxis
tickLine={false}
orientation=left
axisLine={false}
/>
<Tooltip
isAnimationActive={false}
separator={: }
content={<CustomTooltip />}
/>
<CartesianGrid vertical={false} />
{chartInfo.map(bar => (
<Bar
key={bar.dataKey}
name={bar.name}
dataKey={bar.dataKey}
isAnimationActive={false}
/>
))}
</BarChart>
</ResponsiveContainer>
)
export default BarChart
I've poured over the API docs 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 this one.
I tried setting up mine with custom shapes like that demo and rendering with Cell instead of Bar, but the background was still there on hover. The background color is #ccc but searching the repository with that keyword yielded no clear methods or props to try to override or hook into.
More From » reactjs
