Plotly.js autoscale

Question

Is there a parameter in Plotly.js to autoscale the axes to fit the plotted data automatically?

Scenario: I'm plotting temperature(y-axis) vs. time(x-axis) over the latest 30 minutes.

Problem: When the page loads, the graph shows nothing. I would fix the axes, but the x-axis needs to show latest 30 minutes and update every minute. However, when I click 'Autoscale' or 'Reset Axes', the graph fits the data perfectly!

Question: Can I set the plot to automatically "Autoscale" when the page loads, rather than requiring a user to click 'autoscale'?

See app here: https://vast-fortress-23871.herokuapp.com/

Answer 1

A really silly hack is to add this:

document.querySelector('[data-title="Autoscale"]').click()

It will automatically click the Autoscale button. A better way would be to figure out what function the button is actually calling and call that instead.

Answer 2

For me, this worked perfectly and simply (thanks to https://codepen.io/plotly/pen/KpLVzv):

// script comes before
var layout = {
  xaxis: {
    autorange: true,
    showgrid: false,
    zeroline: false,
    showline: false,
    etc.
    }
// script comes after

Answer 3

I solved this problem with a relayout. Just set autorange property at 'true' on xaxis and yaxis. It will autoscale on both axis :

// To call when data is ready, after your page loads.
Plotly.relayout( yourGraph, {
    'xaxis.autorange': true,
    'yaxis.autorange': true
});