Ng2-Charts Angular 2 - Update is performed on the chart, however, with empty data

Question

I’m trying to update a graph using ng2-chartjs in Angular 2 (specifically Angular 7.2.0). When updating, the graph is resized, but the line of the graph is not drawn. To be clear, here’s what happens when I receive new data:

I’ve already checked the data on the console and it’s all consistent with what’s coming from the server. When I reload the page, the chart is drawn normally, as the gif starts.

Canvas in html (ng2-chartjs):

<div style="display: block;" *ngIf="lineChartData.length > 0">
          <canvas
            #chart
            baseChart
            width="800px"
            height="400px"
            [datasets]="lineChartData"
            [labels]="lineChartLabels[0]"
            [options]="lineChartOptions"
            [colors]="lineChartColors"
            [legend]="lineChartLegend"
            [chartType]="lineChartType"
          ></canvas>
        </div>

I call this function every 5 seconds, using interval, from the rxjs library:

private loadMeasurements(serialnumber, data?) {
    this.measurementService
      .getByEquipmentSerial(serialnumber, data)
      .pipe(first())
      .subscribe(measurements => {
        if (measurements.length > 0) {
          this.clearVariables();
          this.measurements = measurements;
          this.measurements.forEach(element => {
            this.humidityData.push(element.sensors.humidity);
            this.formatedHumidity.push(element.sensors.humidity.toFixed(2));
            this.temperature.push(element.sensors.temperature);
            this.dataLabels.push(new Date(element.date).toLocaleString());
          });
          this.averageTemperature = this.getAverageTemp(this.temperature);
          this.average = this.getAverage(this.humidityData);
          this.loadNumberOfMeasurements(serialnumber);

          this.lineChartData.length = 0;

          this.lineChartData.push(
            {
              data: this.formatedHumidity.slice(0).reverse(),
              label: "Umidade",
              backgroundColor: "rgb(102, 194, 255)",
              fill: false
            },
            {
              data: this.temperature.slice(0).reverse(),
              backgroundColor: "rgb(153, 255, 51)",
              label: "Temperatura",
              fill: false
            }
          );

          this.lineChartLabels.length = 0;
          this.lineChartLabels.push(this.dataLabels.slice(0).reverse());

          //this.chart.chart.update();
          this.formatedHumidity = [];
          this.humidityData = [];
          this.temperature = [];
        } else {
          this.timer.unsubscribe();
          this.average = "0";
          this.averageTemperature = "0";
          Swal.fire("Ops!", "Nenhuma medição registrada", "info");
        }
      });
  }

Here’s how I run the function by time interval:

this.timer = Observable.interval(5000).subscribe(val => {
      this.loadMeasurements(this.serialNum);
    });

I have tried to check the error numerous times but without success. The browser console does not indicate anything wrong