Black Lives Matter. Please consider donating to Black Girls Code today.

Scroll X Axis of two charts together

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?

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

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

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).

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