I execute Plotly.react in a setInterval to update a graph every second with data taken from a database. According to Plotly's documentation, Plotly.react does the same job as Plotly.newPlot, but is more efficient when called to replace an existing graph.
My problem is that every time the setInterval executes Plotly.react, the
<div class="user-select-none svg-container" style="position: relative; width: 100%; height: X;">
tag generated by the function (can be seen in the page inspector of your browser) toggles between X = 100% and X = 450px.
This results in the sentence "This text keeps moving..." moving up (behind the plot) and down (below the plot) constantly. Plotly.newPlot doesn't have this problem (tested both on Firefox 95 and Edge 96).
Is there a way to avoid this behaviour while keeping the redrawing efficiency of Plotly.react?
Minimal example with constant values in the graph:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src='https://cdn.plot.ly/plotly-2.8.3.min.js'></script>
</head>
<body>
<div id='plotDiv'><!-- Plotly chart will be drawn inside this div --></div>
<p>This text keeps moving up and down but is not supposed to.</p>
</body>
<script src="plot.js"></script>
</html>
plot.js:
setInterval(function(){
Plotly.react(
'plotDiv',
[{"x":[0,1,2,3,4,5],"y":[17,36,1,14,5,7],"mode":"markers+lines","type":"scatter"}],
{title: "Some title"},
{responsive: true}
);
}, 1000);
Edit: I discovered the problem occurs in Firefox only when the page is accessed through Apache (executed locally with Xampp), not when the html is read directly by the browser. It happens in both cases in Edge.