Google Charts tooltip flickering

Question

When using Google Charts, sometimes the tooltip appears behind the mouse pointer, causing a flickering when the mouse is moved, even a little bit.

Is this a known issue?

I put a screenshot. The tooltip is on the same position as the mouse, causing a flickering when I move the mouse a little bit. — Arnaud, Jun 21 '16 at 07:48

NetVicious · Accepted Answer · 2022-06-06T16:07:09.403

164

Yes, it's a little bug.

You only need to add this to your CSS:

svg > g > g.google-visualization-tooltip { pointer-events: none }

edited Jun 06 '22 at 16:07

answered Sep 29 '16 at 16:13

NetVicious

3,848
1
33
47

7

Thanks for this, I only wanted this to target my Google Charts so added the following: svg[aria-label="A chart."] > g > g:last-child { pointer-events: none } Not very future proof, but worth adding imo. – Jamie G Aug 02 '17 at 11:14
Stupid bug but a very simple and clever solution. Thanks! – Silver Ringvee Sep 19 '17 at 16:00
Note that if you've also decided to add pointer:cursor to chart slices and legend entries, this fix will remove the pointer cursor from the last legend entry. Fixed with: svg>g>g:not([column-id]):last-child { pointer-events: none } – TMA-1 Feb 07 '18 at 05:38
@neel upadhyay it helped me too :D – Suresh Karia Feb 27 '18 at 13:32
Doesn't seem to work with angular-google-charts though. – Sanjay Verma Oct 20 '18 at 23:13
Are you sure? Check this fiddle, it works perfectly. https://jsfiddle.net/netvicious/t5hzgok4/3/ Remove the last line of the CSS part to check without the hack. – NetVicious Oct 22 '18 at 08:02
4

It's March 2019. The bug is still there and this answer still worked :D – Deepak Mahakale Mar 30 '19 at 12:03
3

It's Jan 2020. The bug still exists and the fix still works. – deepak.prathapani Jan 20 '20 at 22:46
11

July 2020. Time seems dark. Coronavirus strike across the lands leaving all men shivering with fear. All seem uncertain but one thing we could be certain of: this bug persists and the fix still works – Bruno Francisco Jul 14 '20 at 18:52
December 2021... Times are not much brighter yet, we're on the fifth major strain of the virus. One thing we can still count on: the bug persists and the fix still works, though it still also takes out some of the functionality (like seeing the absolute numbers on mouseover) – patrick Dec 30 '21 at 11:00
What a tragedy it is that this is the top accepted answer. I am currently going through and taking out all of this CSS that's gumming things up in a project I'm working in. The problem is that the tooltip isn't the only element that matches your selector, and that causes problems elsewhere. It screws up mouse controls for the last element of a lot of stuff. svg g.google-visualization-tooltip { pointer-events: none } should be the only thing required. – JohnTD Jun 04 '22 at 14:26
Edited. Thanks. Google has been modified the code a bit in those last 6 years, so .... – NetVicious Jun 06 '22 at 16:07

score 16 · Answer 2 · answered Jun 21 '16 at 09:21

16

Yes it appears that flickering is an open issue.

https://github.com/google/google-visualization-issues/issues/2162

answered Jun 21 '16 at 09:21

David Bradshaw

11,859
3
41
70

score 11 · Answer 3 · answered Dec 15 '17 at 11:18

11

That works in my case

svg > g:last-child > g:last-child { pointer-events: none }
div.google-visualization-tooltip { pointer-events: none }

answered Dec 15 '17 at 11:18

user2960190

180
1
4
16

2

`div.google-visualization-tooltip { pointer-events: none }` is the best solution here. – C0ZEN Feb 19 '18 at 19:50
1

This doesn't work for me any more - the `div` has changed to a `g`. Go with `svg g.google-visualization-tooltip { pointer-events: none }` – jg2703 Jun 18 '21 at 07:25

score 7 · Answer 4 · answered Jun 18 '19 at 06:57

7

Late to the party, but this is only targeting the filckering tooltip and will not affect/disable html default tooltip on clipped Labels(hAxis or vAxis) and Legends:

svg > g > g.google-visualization-tooltip { pointer-events: none }

answered Jun 18 '19 at 06:57

Muhammad Sheraz

569
6
11

1

This should be the answer. The one that is currently accepted disables the ability to select the last item in a legend – BrushyAmoeba Oct 18 '21 at 18:09

score 3 · Answer 5 · answered Jun 13 '21 at 15:05

I was able to prevent the flicker by changing the tooltip options to html and ignore bounds. I believe ignoreBounds can only be used when the tooltip is html and it pushes the tooltip outside the bounds of the chart. *I did not test this much.

tooltip: { isHtml: true, ignoreBounds: true }

score 2 · Answer 6 · answered Nov 12 '17 at 02:54

Yes, you are right, tooltip covers the trigger area causing tooltip to disappear, which, in turn, opens the trigger area and displays it again and so on, and so on.

I solved it by targeting the tooltip container through CSS and overriding google's CSS something like so:

div.google-visualization-tooltip {

    padding: 0 !important;
    margin: 0 !important;
    border:none !important;
    box-shadow: unset !important;
    background-color: rgba(0,0,0,0) !important;
    height:auto !important;
    overflow:hidden !important;

}

This should display your HTML tooltip about 1em away from the mouse pointer and also allows you to get rid of original ugly white box. Worked for me on Calendar Chart. If this doesn't work in your case, you have to find out the class name of your chart's tooltip container.

I think the root of the problem is that the tooltip is shown too close to the pointer, but if you remove margin and padding of that container, it kind of fixes it.

Hope that works for you.

Thanks for your solution. In other solution provided I am not able to click on the last legend. — arindam.chakraborty, Jan 28 '20 at 12:55

score 0 · Answer 7 · answered Dec 30 '21 at 11:05

0

The bug doesn't happen in the older version of the charts. Change this:

google.charts.load('current', {'packages':['corechart']});

to this:

google.charts.load('42', {'packages':['corechart']});

My pie-charts now work perfectly with no flickering

answered Dec 30 '21 at 11:05

patrick

11,519
8
71
80

Google Charts tooltip flickering

7 Answers7