How to synchronize dcc.Graphs axes?

I am developing a web application to display some graphics.
The application has the following components

  • a drop-down menu to select the device to display the data for
  • a date range selector to select the date ranges to select the data from
  • two entries where the time intervals are specified
  • radio elements to select a period to create a pdf export.

The behavior of the application is as follows: when the device, dates and time ranges are selected and the “submit” button is clicked, a callback is used to retrieve the data from an API for those specifications and four different graphs appear to display the data. When the period is selected for the pdf and the “export to pdf” button is pressed, a callback is used to generate the pdf.

Now I want the graphs to be synchronized. Meaning that they should be synchronized when zooming and moving one of them, so that if I zoom in on any of the graphs the rest update their layouts to show the same ranges but without changing any selected parameters.

I am using dash and plotly for that purpose.

Is it possible to achieve it?

I can provide the code if needed.

Hi @claudiaperez welcome to the forums.

Maybe these topics get you started: