Plots are initially displayed with a wrong margin in Chrome

I'm working on a web-app that should run in desktop and mobile. I've tested the app in Firefox and Chrome and noticed that the width (or right margin) of the plot is wrongly initialized.

The problem: The plot is too big when the page is initially loaded. After resizing the browser (responsive layout), the plot is updated and suddenly fits the screen properly.
I've added a restyle call to my script and that improves things a bit, but not completely.

  <div id="progress-plot"></div>
  <script>
    var graph = {{progress_plot | safe}};
    var config = {responsive: true, displayModeBar: false, showTips: true}
    Plotly.newPlot('progress-plot', graph.data, graph.layout, config);
    Plotly.restyle('progress-plot', graph.layout);
  </script>

The app is a Flask app (the snippet is from a jinja2 page) and I'm using Bootstrap for the front-end.

I've attached a file with the contents of graph.
graph.txt

Here are some screenshots:

After slightly resizing the page:

Bắt đầu bằng cách tái hiện đoạn mã Plotly.newPlot được cung cấp trong Chrome, sử dụng graph.txt đính kèm và bố cục Bootstrap responsive. Kiểm tra đường đi của quá trình xác định kích thước ban đầu trước và sau khi trình duyệt được thay đổi kích thước; hoàn tất khi biểu đồ có chiều rộng và lề phải chính xác ngay ở lần render đầu tiên mà không cần resize hoặc restyle.