How can I limit the zooming/panning range of my plotly.js scatter plot to the minimum and maximum data values?

Question

We have a scatter plot in our AngularJS application based on Plotly.js. We are able to zoom and pan the chart beyond the minimum and maximum values of the data on both the x axis and y axis. We would like to prevent this. Would like panning and zooming to stop when the minimum/maximum values are in view (or a little beyond in order to give it some buffer).

Please note: we have the toolbar disabled so panning can only happen by hovering the mouse over the axes and getting the double-headed arrows. Zooming occurs by hovering over the chart and scrolling the mouse wheel.

Here is an example of the data and the layout:

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
   }
]

LAYOUT:

{
   "title":{
      "text":"Time Series",
      "font":{
         "color":"#3dcd58",
         "family":"Nunito-Regular",
         "size":18
      },
      "xanchor":"left",
      "x":0
   },
   "font":{
      "color":"#333",
      "family":"Nunito-Regular"
   },
   "dragmode":"pan",
   "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":[
         1664327580000,
         1698922140000
      ]
   },
   "hovermode":"closest",
   "yaxis":{
      "showticklabels":false,
      "range":[
         -6.052083333333334,
         27.278935185185187
      ]
   },
   "yaxis2":{
      "showticklabels":false,
      "overlaying":"y",
      "range":[
         -20.650000000000002,
         433.65
      ]
   }
}

On a related note, if anyone has an answer to this, I would greatly appreciate an answer there too.

Answer 1

As of Plotly.js v2.26.0 you can determine min and max allowed ranges of axes like this:

layout: {
   xaxis: {
      minallowed: 1664327580000
      maxallowed: 1698922140000
   }
}