I have a problem with every chart in my webapp, whereby the position of the hovertext/caret location within the chart does not correspond to the position of the cursor in the webapp. There seems to be a substantial offset of 2 - t tick points, depending on the chart (see attached). I’ve tried using ‘hovermode’ : ‘closest’ in my chart figure layouts, but this seems to do nothing. My charts are typically embedded in html as below, with my figures generated in the callback functions:
This seems such a basic problem that I imagine that the solution is quite simple! but multiple googles have produced nothing, so I thought that I would ask here. Any help would be gratefully received!
Hi @Carl, maybe I’m missing something but I don’t see anything wrong with the attached picture. On a bar chart the hover tooltip points to the side of the bar (probably in order to reduce the overlap with the bar itself).
If I was to move my mouse vertically downwards, so that the ‘+’ was over 2004-12-31, the hover text would still correspond to 2007-12-31 in this example, rather than 2004-12-31. There is a horizontal mismatch of 2 - 5 tick points between the x co-ordinates of the mouse on the chart, and the hovertext displayed, depending on the chart. But all of my charts have this problem.
I actually had to manually add it in because windoze screen grab did not save the cursor position. But that is to illustrate where my mouse pointer is (it looks like a bigger ‘+’ on my webapp).
Would it be possible to test whether the problem persists in a different browser? (Which one are you using by the way?). Also can you confirm that you are using hovermode='closest'? Because the screenshot above looks like hovermode='x'.
Good idea: I have been using chrome, apologies for not thinking to try another browser first.
On attempting with firefox, the problem is not present. In terms of hovermode = ‘closest’, I had just attempted that before posting here, and it didn’t fix my problem in chrome.
