Multiple individual plots sharing y-axis

Dash Python
1

Hi~ I want to make multiple stacked time-series plots with their x-axis (time) aligned and all plots can react to mouse zoom-in/out on one plot. For example, when you zoomin one plot, all plots got zoomin.

So far, I can achieve this by using make_subplots(). However, I found:

  • All data series are shown in 1 legend, but I need to have a per-plot legend.
  • Mouse event can’t tell which plot receives the event.

The above 2 difficulties can be solved by using multiple plots (with css to align them right). However, the mouse zoom-in/out on one plot will not affect other plots. So, I’m wondering if there is way to do this? Or, show me what source code to modify.

A work-around solution is to implement such synced zoom-in/out in python backend, but this will increase the server loading. It would be best if such functionality can be done in the frontend javascript.

2

I managed to solve this by using plotly js, instead of Dash.

If someone also needs to do this, you will have to deal with.

  • Align multiple independent plots, by playing with width, margin, legend text length.
  • Register callback function to all independent plots, to achieve synchronized zoom-in/out.