CanvasJS live linechart not rendering datapoints

Question

I'm writing the charts for an Angular project that will use an API to display statistics of floorball games. I've already checked the API code and logged the objects and all the data is passed to the chart completely correctly so the problem will most likely be with my chart code.

After the data gets put in the chart the y-axis lines appear at the correct sizes but there is no visible line.

The chart gets initiated OnInit():

ngOnInit(): void {
  this.api.activePlayer().subscribe(d => this.player = d);
  this.api.activeMatch().subscribe(d => this.match = d);

  this.statUpdate();

  this.accel = this.getXformatted();

  this.chartAcc = new CanvasJS.Chart("graphAcc",{
    title:{
      text:"Live Acceleration Chart"
    },
    data: [{
      type: "line",
      dataPoints : this.accel
    }]
  });

  this.chartAcc.render();

  setInterval(d => {this.UpdateChart()}, 5000);
}

statUpdate() is:

statUpdate(): void {
  this.api.matchplayerstats(this.player.name, this.match.id).subscribe(d => this.stats = d[0]);
}

getXformatted() is:

getXformatted(): any[]
{
  var output : any[] = [];
  Jquery.each(this.accel, function(key, value){
    output.push({
        x: value.time,
        y: value.x
      });
  });
  return output;
}

updateChart() is:

UpdateChart(): void
{
  this.statUpdate();

  if (this.stats.accel.length > this.accel.length)
  {
    for(var i = this.accel.length; i < this.stats.accel.length; i++)
    {
      this.accel.push({
        x: this.stats.accel[i].time,
        y: this.stats.accel[i].x
      })
    }
  }

  this.chartAcc.render();
}

The only guess I have left is that the accel[x].time (datatype: Date) doesn't get passed correctly but I wouldn't have any idea on how to fix this.

Answer 1

The problem was with the passing of the Date variable as I had guessed at the end of my post. It was passed by the API without a trailing Z. Adding the trailing Z solved the date format problem.