Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

How to make 'shape' track mouse motion?

I have a requirement to provide a selection mechanism in one chart that will prompt a change in the data displayed in a related chart. The first chart is a smoothed x-y plot, let’s say covering an x range of 0 to 20, displayed in an element 800px wide. I have added an array of two rectangular shapes to the layout object of that chart. One of those should track the mouse motion, but snapping to integer values (i.e. when the mouse is at 4.87, the highlight will cover the interval from 4 to 5). A single click on the chart should lock the second highlight to the current position of the tracking highlight.

As far as I can tell, Plotly supports click and hover events but not motion. I don’t believe hover will help here, as the tracking is expected to work continuously, rather than only when in proximity of the the data. As a consequence, I’m now using jQuery motion events to get mouse coordinates within the SVG canvas. If I could get access to the underlying D3 scale object, I think I can map screen coordinates to data values. I would then need to use those values to update the shapes. I haven’t yet managed to confirm that that updating is a supported operation.

Is this possible? Am I approaching this the right way, or is there a less involved mechanism?

That’s correct. You might want to look at http://codepen.io/etpinard/pen/EyydEj for a sorta hacky way to track cursor position on a plotly graph. I think that should add you need for your project. Let me know if you have any other questions.

1 Like

Thanks etienne, that looks like exactly what I was needing (assuming I can successfully use .relayout() to move a shape).