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

Scroll Wheel Pan

I was wondering if there’s a way to trigger panning through javascript without using relayout. I’m working with 5 graphs each with around 300k data points. The graphs need to be in sync. So when i do capture a scroll wheel event and relayout every single graph, its very laggy and even a single graph scroll using relayout isn’t as smooth as panning. Any input will be appreciated, thank you!

Would you mind sharing a reproducible example. We’ve made numerous performance improvements to relayout in the past couple months. I’d be happy to help optimize your app.

Unfortunately, I’m not allowed to share the code for now, but I can explain what I did, if that helps? I basically captured the scrollwheel event, and per scroll, I made a set amount to change the X-Axis range by. Since I had already implemented a relayout event which keeps the X-axis range the same for all 5 graphs, I just change the xaxis range for one graph with animate, and the relayout event gets triggered for the other 4 graphs.

This is a small example that i tried recreating, any help will be appreciated, Thank you!
Preformatted texthttps://codepen.io/hariharantatch/pen/ZRvEEB?editors=1010

An issue I encountered was when I used relayout, it doesn’t have any xrange values that are being thrown, so the event handler wouldn’t work for it. Idk if this is on purpose or whether I’m doing anything wrong. Is there any other way to scroll pan like the functionality for scroll zoom?