CODEWITHSUNDEEP
javascriptgoogle-visualization
Arnaud
Arnaud

Reputation: 5122

Google Charts tooltip flickering

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?

enter image description here

Upvotes: 51

Views: 19522

Answers (9)

Maxime Lechevallier
Maxime Lechevallier

Reputation: 1196

Legend stroke was still flickering with the fix.

I end up fixing everything with

/* Prevent pie chart tooltip from flickering on hover */
svg > g > g.google-visualization-tooltip { pointer-events: none; }
/* Prevent pie chart legend stroke from flickering on hover */
svg > g > g:nth-child(even) { pointer-events: none }

Chart with legend stroke

Upvotes: 0

Nicky Michelmore
Nicky Michelmore

Reputation: 1

I added this to my css and it works perfectly with no flickering.

div.google-visualization-tooltip {   
pointer-events: none;   
}

Upvotes: 0

NetVicious
NetVicious

Reputation: 4045

Yes, it's a little bug.

You only need to add this to your CSS:

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

Upvotes: 173

patrick
patrick

Reputation: 11721

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

Upvotes: 0

Ben Chicka
Ben Chicka

Reputation: 31

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 }

Upvotes: 3

Muhammad Sheraz
Muhammad Sheraz

Reputation: 713

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 }

Upvotes: 9

user2960190
user2960190

Reputation: 190

That works in my case

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

Upvotes: 11

Pavel
Pavel

Reputation: 694

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.

Upvotes: 3

David Bradshaw
David Bradshaw

Reputation: 13087

Yes it appears that flickering is an open issue.

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

Upvotes: 16

Related Questions