title: Chartjs not updating with data
body: <p>I am using <code>react-chartjs-2</code> and trying to create a line graph from my data.</p>
  <p>Currently, I am getting the data from a backend in my main component <code>App.js</code> and then passing it as <code>props</code> to the <code>Graph</code> component.</p>
  <p>The data comes into my <code>Graph</code> component correctly although it seems like it is rendering multiple times?</p>
  <p>The intial data passed to <code>Graph</code> looks like the following:</p>
  <p><em>props.data:</em></p>
  <pre class="lang-js prettyprint-override"><code>{
  &quot;2020-01-03&quot;: &quot;0&quot;
  &quot;2020-01-04&quot;: &quot;0&quot;
  &quot;2020-01-05&quot;: &quot;0&quot;
  &quot;2020-01-06&quot;: &quot;0&quot;
  &quot;2020-01-07&quot;: &quot;0&quot;
  &quot;2020-01-08&quot;: &quot;0&quot;
  &quot;2020-01-09&quot;: &quot;0&quot;
  &quot;2020-01-10&quot;: &quot;0&quot;
  &quot;2020-01-11&quot;: &quot;0&quot;
  &quot;2020-01-12&quot;: &quot;0&quot;
  &quot;2020-01-13&quot;: &quot;0&quot;
  &quot;2020-01-14&quot;: &quot;0&quot;
  ....
  }
  </code></pre>
  <p>Then in my <code>Graph</code> component I split the data into dates and numbers:</p>
  <pre class="lang-js prettyprint-override"><code>let pointData = [];
  let dates = [];
  for (const property in props.cases) {
    pointData.push(`${props.cases[property]}`);
    dates.push(`${property}`);
  }
  pointData = pointData.slice(-30);
  dates = dates.slice(-30);
  console.log(pointData);
  console.log(dates)
  </code></pre>
  <p>Although when running the above console logs my data is being repeated and emptied occasionally.</p>
  <p><a href="https://i.stack.imgur.com/hTQd2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hTQd2.png" alt="repeat" /></a></p>
  <p>On the 3rd &amp; 4th last <code>console.log()</code> my data is correct, although the other times I am just getting an empty array.</p>
  <p>When I then try and render this data to my chart:</p>
  <p><em>Graph.js</em></p>
  <pre class="lang-js prettyprint-override"><code>const data = {
      // this would loop over passed in dates
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
          data: pointData
        }
      ]
    };
  
      return (
      &lt;div className=&quot;vaccine-chart chart&quot;&gt;
        &lt;h2&gt;Daily Cases:&lt;/h2&gt;
        &lt;Line data={data} /&gt;
        &lt;/div&gt;
      )
  }
  </code></pre>
  <p>Nothing appears and no data is rendered.</p>
  <p>How can I make my chart render my data correctly? How do I also fix the problem of empty arrays being outputted rather than my actual data?</p>