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?