Optional 2nd plot with x axis synchronised with 1st plot

I have a use case I’m not entirely sure how to solve…
In my Dash app, I have 1 main scatter/line plot with a range selector underneath.
I now have a second data set that relates to the first one with the exact same x axis values.

  • I would therefore like to display it underneath.
  • I would also like that if the user zooms on a particular range in the 1st graph (in plot itself or with range selector), the 2nd graph mirrors that selection so that the 2 graphs always show the same range, allowing them to be compared accurately
  • ideally I would also prefer that the user was able to zoom in the second graph and that the range of the 1st graph was synchronised

So far i could use subplots and a slider as shown in Range Slider and Selector | Python | Plotly to solve this problem.

However, the data for the two plots is very resource I t’es I’ve to obtain and the second graph is only useful in a minority of cases. I would therefore prefer that by default only the first graph is shown, and for the user to have the option of displaying the second one. And the issue when using subplots is that the aspect ratio of the 2 plots would be very different is shown together or if only 1 was shown… (difference between using half the height of the plot versus full height)

I would therefore prefer having 2 independent graphs ideally…

Can anyone think of a way of solving this?

Hi @Wabiloo where you able to figure this out?