Chartjs-Dynamically updating time data in chart.js freezes the chart

by

2👍

In your code, you add an element to your data array and remove the oldest one as soon as the limit of three entries is exceeded. The problem with this approach is that Angular doesn’t notice changes in your data array because its reference doesn’t change and its size remains the same.

The issue can be solved by replacing the data array inside ChartDataSets each time the data changes. Instead of using Array.shift(), you could use Array.slice().

lineChartData: ChartDataSets[] = [{
    data: [],
    label: 'Series A'
}];

...

ngOnInit() {
    this.interval = setInterval(() => {
        const data = this.lineChartData[0].data;
        data.push({ y: Math.random(), x: new Date() });
        this.lineChartData[0].data = data.slice(data.length > 3 ? 1 : 0);
    }, 2000);
    ...
}

Please have a look at the following StackBlitz

Leave a comment