How To Hack the Bar Chart on Hover on Recharts | Hacking Recharts #2

Image created by Celia O

If you haven’t seen the 1st post of this series, feel free to check it out below:

2 Secret Pie Chart Hacks To Up Your Recharts Game | Hack Recharts #1

So, before we start, I just want to acknowledge that Recharts is honestly one of my favourite ReactJS libraries for statistical models. It has clean documentation and it is easy to use and understand, allowing you to quickly start using the library and just run with it.

But, I also have to say that there are just some things that aren’t fully documented, and that’s perfectly fine. It’s exactly why this post is here!

I’ll be walking through how you can change the colours of your bar chart on hover.

Standard Rechart Bar Chart on Hover: A tooltip appears and the background colour changes

Surprisingly, Recharts hasn’t seem to have added any documentation on how to change the colours of the bar chart based on hovering over or selecting the bar itself.

The only thing that changes when you hover over a bar is (1) the tooltip pops up and (2) a grey background appears as a form of ‘highlighting’ your bar.

But see, that’s pretty basic. It pretty much comes with the code.

So what we want to accomplish by the end of this tutorial are 3 things:

1. When you hover over 1 bar, the rest of the bars will decrease in opacity
2. After you leave the bars, the original colour appears
3. As you hover over 1 bar, the grey background at the back is removed

As seen in the gif below:

What we want to achieve!

And we can do them step-by-step.

Make One Bar Active, The Rest Become More Translucent

For the first step, we’ll make use of onMouseMove to determine which bar is active (i.e. the mouse is hovering over it).

As per usual, let’s begin with just building a basic Bar Chart.

Our data will be formatted like below:

const data = [
  { name: "Page A", uv: 4000 },
  { name: "Page B", uv: 3000 },
  { name: "Page C", uv: 2000 },
  { name: "Page D", uv: 2780 },
  { name: "Page E", uv: 1890 },
  { name: "Page F", uv: 2390 },
  { name: "Page G", uv: 3490 }
];

And a basic set-up of the Recharts Bar Chart is as follows:

Now, in order for us to create a bar chart that changes colour on hover, we have to do 2 things:

Firstly, make use of onMouseMove inside <BarChart /> — this is pretty powerful because wherever your mouse moves to, Recharts has an activeTooltipIndex stored. We basically have to set the value as state to use it later.

const [focusBar, setFocusBar] = useState(null);
... // previous Bar Chart codes here
onMouseMove={(state) => {
   if (state.isTooltipActive) {
     setFocusBar(state.activeTooltipIndex);
   } else {
     setFocusBar(null);
   }
}}

Finally after we get the active index from onMouseMove, we have to map the data and assign each <Cell /> with a colour but it changes based on the value of the activeTooltipIndex.

<Bar dataKey="uv" fill="#2B5CE7">
  {data.map((entry, index) => (
    <Cell
      fill={focusBar === index ? "#2B5CE7" : "rgba(43, 92, 231, 0.2)"} 
// for this, we make the hovered colour #2B5CE7, else its opacity decreases to 20%
    />
  ))}
</Bar>

And tadaa!

Screen Recording 2021-05-18 At 3.42.56 PM GIF | Gfycat

But see, the thing about this, which some people might want to improve on further, is the fact that once your mouse ‘leaves’ the chart, the chart looks like this:

Which might not be the colour scheme you want, because it basically takes on

<Cell fill="rgba(43, 92, 231, 0.2)" />

Since the value of focusBar is null.

So let’s say you do want the Bar Chart to take on a solid colour instead when your mouse leaves and only highlights one bar when you hover over it, we need to add another state to manage this, as seen in step 2.

After Leaving All Bars, Return to Original Colours

Adding from step 1’s procedures, the steps for step 2 is pretty simple. All we need to do is:

1. Add another state inside onMouseMove to manage the colour logic
2. Have a slightly complex colour switching logic

const [focusBar, setFocusBar] = useState(null);
const [mouseLeave, setMouseLeave] = useState(true);
... // previous Bar Chart codes here
onMouseMove={(state) => {
   if (state.isTooltipActive) {
     setFocusBar(state.activeTooltipIndex);
     setMouseLeave(false);
   } else {
     setFocusBar(null);
     setMouseLeave(true);
   }
}}

Basically here, we want the colour #2B5CE7 to appear under 2 conditions:

1. If focusBar === index (like in the first method)
2. If mouseLeave === true

All we have to do is this:

<Cell
  fill={
    focusBar === index || mouseLeave
      ? "#2B5CE7"
      : "rgba(43, 92, 231, 0.2)"
  }
/>

Screen Recording 2021-05-18 At 3.43.35 PM GIF | Gfycat

When your mouse leaves, the bars turn back to #2B5CE7

And that’s it for this step!

To just clean up everything, let us remove the grey background whenever someone hovers over a bar.

Removing The Grey Background When Hovering

For the final step, all you have to do is to simply change the cursor flag in the Tooltip component as follows:

<Tooltip cursor={false} />

And that’s it! How easy is that?!

Grey background no longer appears when you hover over

Of course, the jump in colours between hovering off the chart is quite… stark. But when animations do get added in for onMouseMove, maybe I’ll come back and add more things to this story!

I’m sure there are more Recharts hacks that’s available out there, so if you do see any of your own, feel free to share it!

If I find enough for another post, you bet I’ll write another one.

Meanwhile, if you’ve not checked out my previous 2 Recharts posts (yuh, I wrote 2 already?!), here you go:

2 Secret Pie Chart Hacks To Up Your Recharts Game | Hack Recharts #1

Tutorial: How to Create a Waterfall Chart in Recharts

Also, if you need the full codes, here’s my codesandbox!