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...

I tried using an Angular directive (NG2-Charts) to help out thinking maybe that was the problem, but that doesn't work either...

Component.ts:
... Other variable and stuff up here...

getStockData() {

    this.stocksService.getStockData()

      .subscribe(

        (response) => {

          for(var i = 0; i < response.length; i++) {

            this.stockOpen.push(response[i]['open']);

          }

          console.log('after loop: ', this.stockOpen);

        },

        (error) => 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<any> = [

    {data: this.testData},

  ];

  public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

  public lineChartOptions:any = {

    responsive: true

  };

Result from console.log():