Scroll X Axis of two charts together

plotly.js
1

I have a rather long chart ( want it to be long, I don’t want it to smoosh the data) that causes a scroll on a div, and currently my x-axis is at the top. I needed a way to have the x-axis scroll with my div (crazy I know). What I ended up doing was creating two charts, one that really just shows an x-axis and another that hides the x-axis labels but shows all of the data. I got them to mostly work styling wise. My problem is currently when I pan or zoom on one I am only aware of relayout which doesn’t update the other chart until I stop panning or zooming. Is there an event I can listen to in order to get the range info more as the pan or zoom is happening rather than when it is complete to simulate them scrolling together?

2

Not at the moment unfortunately. You can try listening to raw DOM events. Something like:

var gd = document.getElementById('graph')
gd.addEventListener('mousemove', function () {
  gd.layout.range // => should have dragged range
})
1 Like
3

I haven’t had a chance to try the mousemove yet to see how well it works. Hoping to try it out tomorrow. Thanks for your suggestion.

I did go ahead and put in a feature request on github since I didn’t see one for this yet. Not sure how useful it would be to everyone, but I could see a couple of different applications.

https://github.com/plotly/plotly.js/issues/2082

4

Unfortunately that doesn’t work.

When panning, the mousemove stops firing.

Is there anything else you know of that I might be able to hook into?

I tried adding a loop into the mousedown event and ending the loop on the mouseup, but it doesn’t seem to actually fire on the charts div element. Also tried adding a loop onto the mouseover, but when I did that it actually killed my browser (not surprising since it isn’t a great solution).

5

Any update in 2019? I’d like to do this in Python.