title: Using data from API with Chart JS
body: <p>I am getting data from an api and then reformatting part of it into an array using .map(), I am successfully able to do this, but when it comes time to pass it into Chart JS as data it does work. I am able to pass in a normal, hard coded, array but not my own data...</p>
  
  <p>I tried using an Angular directive (NG2-Charts) to help out thinking maybe that was the problem, but that doesn't work either...</p>
  
  <p>Component.ts:
      ... Other variable and stuff up here...</p>
  
  <pre><code>getStockData() {
      this.stocksService.getStockData()
        .subscribe(
          (response) =&gt; {
            for(var i = 0; i &lt; response.length; i++) {
              this.stockOpen.push(response[i]['open']);
            }
            console.log('after loop: ', this.stockOpen);
          },
          (error) =&gt; console.error(error)
        );
        console.log('real: ', this.stockOpen);
        console.log('test: ', this.testData);
    }
  
    // Chart JS version
    buildStockChart() {
      var ctx = document.querySelector("#chart");
      this.chart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: [1,2,3,4,5],
          datasets: [
            { 
              data: this.stockOpen,
              borderColor: "#3cba9f",
              fill: false
            }
          ]
        },
        options: {
          legend: {
            display: false
          },
          scales: {
            xAxes: [{
              display: true
            }],
            yAxes: [{
              display: true
            }],
          }
        }
      });
    }
  
    // NG2-Charts version
    public lineChartData:Array&lt;any&gt; = [
      {data: this.testData},
    ];
    public lineChartLabels:Array&lt;any&gt; = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
    public lineChartOptions:any = {
      responsive: true
    };
  </code></pre>
  
  <p>Result from console.log():
  <a href="https://i.stack.imgur.com/dFHPq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dFHPq.png" alt="enter image description here"></a></p>