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
});

Answer 4

I had the same problem. The code you linked to is minified so I can't (won't) read it, but here's what I did wrong:

If plotly.newPlot() runs before all the data is loaded then it won't autorange (because it has no data and doesn't know to check).

eg

var plotdata = [x:[],y:[],type: 'scatter'];
$.get('mydata.dat',(x) => {/*put parsed x into plotdata*/});
Plotly.newPlot('mydiv',plotdata,layout);

note that plotdata gets populated after the plot was created because $.get() is asynchronous.

Answer 5

For me, this worked perfectly and simply: . . var layout = { xaxis: { autorange: true, showgrid: false, zeroline: false, showline: false, etc. }