Detecting mouse events within plotly plots from external js script

plotly.js
1

Hi,

I’m interested in capturing mouse events like mouse hover, mouse click etc, when users interact with plotly objects.
To do this we are writing a separate javascript function, which uses annotates the HTML with onmouseover and onmouseclick attributes to capture mouse events, using the document.addEventListener() function. But for some reason no events are emitted when users hover over the plotly visualizations and hence I can’t quantify users interactions. For the time being we can only capture continuous x/y positions of the mouse cursor. As far as I can see, we run into this obstacle for both SVG and WebGL (scattergl) modes of plotly.js, whereas logging a visualization written directly via D3.js seems works fine.

  • Does anyone have ideas what might be the cause?
  • In case this might be a limitation in our approach (in terms of API used), do you have other recommendations as to how to capture mouse interactions within plotly plots?

Thanks a lot for your input.

2

Are you adding the listeners to graph itself?

Are you waiting til the graph has been rendered?

3

Hi jinnyzor,

Thanks for your reply and useful questions.

The listeners are not added to the graph itself but to the document object, and we then resolve which element is being interacted with by reading event.target.id.

We are not waiting til the graph has been rendered, the eventlister is added to document when the page loads. I’ll try and see what happens if the event listener is added later.

4

Also, React uses mousedown and mouseup instead of click. You could try that as well.