search

rakannimer / react-google-charts

A thin, typed, React wrapper over Google Charts Visualization and Charts API.
https://react-google-charts.com/
MIT License
1.6k stars 345 forks source link

Pie Chart flicker when mouse hover #302

Open minaairsupport opened 5 years ago

minaairsupport commented 5 years ago

I have a big issue with your nice pic chart that when I hover with the mouse it keep flashing with tooltip

here is a sample of my code

nothing fancy in my code but I need this issue to be fixed as soon as possible

https://codesandbox.io/s/confident-currying-e21sg

crichmond1989 commented 5 years ago

This flicker behavior is showing up on the documentation example (https://react-google-charts.com/pie-chart).

crichmond1989 commented 5 years ago

Hmm, looks like this is an issue with the Google Charts library. The Google Charts documentation has the same behavior: https://developers.google.com/chart/interactive/docs/gallery/piechart

lksilva commented 5 years ago

if you settooltip: { isHtml: true } and define css to pointer-events: none; in wrapper that contains this problem is solved.

There is a way to implements custom tooltip, or overrrid className? google-visualization-tooltip

punithbm commented 4 years ago

@lksilva we've tried in the same way as you mentioned. But still facing the flickering effect. Can you please help us out with some example sample or so?

gujral1997 commented 4 years ago

This flicker issue is in the main library as well. And this library is just a wrapper. In my opinion, this is not the right place to ask this question as the issue is not with this wrapper.

nimesha95 commented 4 years ago

I did fixed this issue by adding below css

svg > g > g:last-child { pointer-events: none }

https://stackoverflow.com/questions/37902708/google-charts-tooltip-flickering https://github.com/google/google-visualization-issues/issues/2162

Just thought this may help somebody.