title: API data not loading in chart.js until element is inspected or page is resized
body: <p>I am using <a href="https://www.chartjs.org/" rel="nofollow noreferrer">Chart.js</a> and this <a href="https://github.com/pomber/covid19" rel="nofollow noreferrer">API</a> to create a line graph of covid-19 cases in Australia.
  However, the API data is not loading in the chart until I do something like inspect an element on the page or resize the window.</p>
  
  <p><strong>Here is my JS file:</strong></p>
  
  <pre><code>window.onload = function() {
     let dates = [];
     let confirmedCases = [];
     let confirmedRecovered = [];
     let confirmedDeaths = [];
  
     function addArrayFunc(date, confirmed, recovered, deaths) {
        dates.push(date);
        confirmedCases.push(confirmed);
        confirmedRecovered.push(recovered);
        confirmedDeaths.push(deaths);
     }
     fetch("https://pomber.github.io/covid19/timeseries.json")
        .then(response =&gt; response.json())
        .then(cases =&gt; {
           cases["Australia"].forEach(({
                 date,
                 confirmed,
                 recovered,
                 deaths
              }) =&gt;
              addArrayFunc(date, confirmed, recovered, deaths)
           )
        })
  
     const ctx = document.getElementById('myChart').getContext('2d');
     new Chart(ctx, {
        type: 'line',
        data: {
           labels: dates,
           datasets: [{
                 label: 'Confirmed',
                 borderColor: 'pink',
                 backgroundColor: 'pink',
                 fill: 'false',
                 data: confirmedCases
              },
              {
                 label: 'Recovered',
                 borderColor: 'blue',
                 backgroundColor: 'blue',
                 fill: 'false',
                 data: confirmedRecovered
              },
              {
                 label: 'Deaths',
                 borderColor: 'green',
                 backgroundColor: 'green',
                 fill: 'false',
                 data: confirmedDeaths
              }
           ]
        },
        options: {
           responsive: true,
           title: {
              display: true,
              text: 'Covid-19 Cases in Australia'
           },
        }
     });
  }
  </code></pre>
  
  <p><strong>Here is my html file:</strong> </p>
  
  <pre><code>&lt;html lang="en"&gt;
     &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;title&gt;Confirmed Covid-19 cases in Australia&lt;/title&gt;
        &lt;style&gt;
           canvas {
              -moz-user-select: none;
              -webkit-user-select: none;
              -ms-user-select: none;
              width: 75%;
           }
        &lt;/style&gt;
        &lt;script src="script.js"&gt;&lt;/script&gt;
        &lt;script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"&gt;&lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;canvas id="myChart"&gt;&lt;/canvas&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I believe I am creating the chart before the data has arrived from the URL but I have no idea have to rectify that. Is this something <code>async/await</code> or <code>watch</code> could fix? How would I go implementing that?</p>
  
  <p>Any help would be greatly appreciated.</p>