title: Chart.js not showing data until I click on the label 3 times
body: <p>I'm adding a chart in a website and I'm having a weird issue with chart.js. I'm loading the data from 2 arrays that are created when the page is loaded from a json file.</p>
  <p>The issue is that the data it's not showing until I click on the label of the chart 2 times. At load, there is no info, 1st click x labels are showing up and in 2nd click both, x labels and data are showing up. After that, clicking on the label of the dataset work as expected.</p>
  <p>I assumed my problem was that I was loading the data before the chart exists, so, my idea was to encapsulate everything in a function and call it when clicking a button that shows the chart, but it's keeping doing the same thing. How would you fix it?</p>
  <p>Here is my html related code:</p>
  <pre><code>&lt;div class=&quot;popup&quot;&gt;
      &lt;span class=&quot;popuptrend&quot; id=&quot;myPopup&quot;&gt;&lt;canvas id=&quot;myChart&quot; width=&quot;auto&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And my JS code:</p>
  <pre><code>$(function(){
      $(&quot;#showTrend&quot;).click(function(){
          createChart();
          var popup = document.getElementById(&quot;myPopup&quot;);
          popup.classList.toggle(&quot;show&quot;);
      });
  });
  function createChart(){
      var labels = [];
      var dataValue = [];
  
      $.getJSON(&quot;./resources/chart.json&quot;, function(jsonData) {
          var index = 0;
          for (var key in jsonData) {
                  if(index == 0){ // SKIP FISRT ITEM
                      index++;
                  }else{
                      labels.push(key);
                      dataValue.push(parseFloat(jsonData[key]));
                  }
          }
      });
      var dataVar = {
          labels: labels,
          datasets:
          [{
              label: &quot;Value&quot;,
              backgoundColor: 'rgba(255, 0, 0, 0.2)',
              borderColor: 'rgba(255, 0, 0, 0.8)',
              borderWith: 1,
              data: dataValue
          }]
      };
      var ctx = document.getElementById(&quot;myChart&quot;);
      var myChart = new Chart(ctx, {
          type: 'line',
          data: dataVar,
          options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }]
              }
          }
      });
  }
  </code></pre>
  <p>And a extract from my data json file:</p>
  <pre><code>{
      &quot;15/04/2017&quot;:&quot;67.34375&quot;,
      &quot;16/04/2017&quot;:&quot;67.3203125&quot;,
  }
  </code></pre>
  <p>And a <a href="http://g.recordit.co/Ix7Nlo7SI4.gif" rel="nofollow noreferrer">gif of the behaviour</a>.
  Thanks!</p>