Is there a way to ensure that Plotly automatically adjusts to the size of the container #myDiv without any noticeable delay when the top button is clicked?
This code snippet demonstrates a high delay:
var z = [], steps = [], i;
for (i = 0; i < 500; i++)
z.push(Array.from({length: 600}, () => Math.floor(Math.random() * 100)));
for (i = 0; i < 100; i++)
steps.push({ label: i, method: 'restyle', args: ['line.color', 'red']});
var data = [{z: z, colorscale: 'YlGnBu', type: 'heatmap'}];
var layout = {title: '', sliders: [{
pad: {t: 5},
len: 1,
x: 0,
currentvalue: {xanchor: 'right', prefix: 'i: ', font: {color: '#888', size: 20}},
steps: steps
}]};
Plotly.newPlot('myDiv', data, layout);
document.getElementById('button').onclick = () => {
document.getElementById('myDiv').classList.toggle('size2');
Plotly.Plots.resize('myDiv');
}#button { background-color: gray; }
#myDiv { width: 500px; height: 300px; border: 2px solid black; }
.size2 { width: 300px !important; height: 200px !important; }<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<span id="button">Click here to change the size</span>
<div id="myDiv"></div>
<div id="text">Hello world</div>