Updating Chartjs dataset in Ionic - chart.js

Question

I was trying to update a bar chart dataset by appending newer data to it using Chartjs. According to doc here, I need to update the datasets.data array and labels. I created the following component in Ionic:
chart.component.ts
import { SensorDataService } from './sensor-data.service';
import { Component, Input, AfterViewInit, ViewChild, ElementRef } from '#angular/core';
declare var Chart: any;
#Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.scss'],
})
export class ChartComponent implements AfterViewInit {
//#Input() chartId: string;
//#Input() chartTitle: string;
#Input() data: Array<number>;
#Input() labels: Array<string>;
//#Input() datasetLabel: string;
interval: any;
count: number;
#ViewChild('chart') chartRef: ElementRef;
chart: any;
constructor(private dataService: SensorDataService) { }
ngAfterViewInit() {
console.log(this.data);
console.log(this.labels);
this.chart = new Chart(this.chartRef.nativeElement, {
type: 'bar',
data: {
labels: this.labels,
datasets: [{
label: 'label',
data: this.data,
backgroundColor: 'rgb(0, 0, 255)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
}
}
]
}
}
});
this.count = 0;
this.interval = setInterval(this.loadData.bind(this), 5000);
}
loadData() {
if (this.count > 10) {
return clearInterval(this.interval);
}
const { data, labels } = this.dataService.getData();
console.log('data loaded');
console.log(this.chart.data.labels);
console.log(this.chart.data.datasets[0].data);
this.chart.data.labels.concat(labels);
this.chart.data.datasets.forEach(ds => ds.data.concat(data));
this.count++;
this.chart.update();
}
}
chart.component.html
<ion-card>
<ion-card-header>
<ion-card-title>Title</ion-card-title>
</ion-card-header>
<ion-card-content>
<canvas #chart></canvas>
</ion-card-content>
</ion-card>
From the console log, I don't see any changes in the size of the array. The graph remains the same as well. I created this as a test before connecting the data from http endpoint where, each request will return newer data and I have to append it to the existing chart. What's wrong with my code as given here and why is the chart not updating?

Answer 1

The Array.concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
Therefore, you should change your loadData() method as follows:
loadData() {
if (this.count > 10) {
return clearInterval(this.interval);
}
const { data, labels } = this.dataService.getData();
this.chart.data.labels = this.chart.data.labels.concat(labels);
this.chart.data.datasets.forEach(ds => ds.data = ds.data.concat(data));
this.count++;
this.chart.update();
}