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:
AFTER PANNING:
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
]
}
}
