How can I pan all y axes together in my Plotly.js scatter plot?

Hello,

I have a Plotly.js scatter plot with multiple series. I would like to pan along the y axis and see all series pan together. Currently, they don’t pan together. Instead, only one of the series pans and the other doesn’t move.

BEFORE PANNING:

before

AFTER PANNING:

after

I need both series to be on separate y axes because they have different units and they are orders of magnitude different in scale, but this shouldn’t mean they can’t pan together.

Here is the series data:

[
   {
      "type":"scatter",
      "x":[...],
      "y":[...],
      "hovertemplate":"%{x}<br>%{y:.2f} %{text}<extra></extra>",
      "text":[...],
      "name":"°C",
      "marker":{
         "color":"#89d300",
         "size":1,
         "opacity":1
      },
      "line":{
         "width":1
      },
      "yaxis":"y",
      "connectgaps":true,
      "measurementGroupId":18
   },
   {
      "type":"scatter",
      "x":[...],
      "y":[...],
      "hovertemplate":"%{x}<br>%{y:.2f} %{text}<extra></extra>",
      "text":[...],
      "name":"kWh",
      "marker":{
         "color":"#2fb5ea",
         "size":1,
         "opacity":1
      },
      "line":{
         "width":1
      },
      "yaxis":"y2",
      "connectgaps":true,
      "measurementGroupId":2
   }
]

And here is the layout:

{
   "title":{
      "text":"Time Series",
      "font":{
         "color":"#3dcd58",
         "family":"Nunito-Regular",
         "size":18
      },
      "xanchor":"left",
      "x":0
   },
   "font":{
      "color":"#333",
      "family":"Nunito-Regular"
   },
   "dragmode":"select",
   "autosize":false,
   "width":425,
   "height":400,
   "margin":{
      "l":20,
      "r":15,
      "b":30,
      "t":30
   },
   "plot_bgcolor":"#ffffff",
   "showlegend":true,
   "legend":{
      "x":0,
      "bgcolor":"rgba(255,255,255,0.3)"
   },
   "xaxis":{
      "range":[
         1663809180000,
         1698403740000
      ]
   },
   "hovermode":"closest",
   "yaxis":{
      "showticklabels":false,
      "range":[
         2.133101851851852,
         31.59375
      ]
   },
   "yaxis2":{
      "showticklabels":false,
      "overlaying":"y",
      "range":[
         -948.1500000000001,
         41163.15
      ]
   }
}

Anybody? :point_up_2: