My line chart is experiencing a strange issue where only the first value added after the initial values will display properly. Subsequent values are getting cut off for some reason.
https://i.sstatic.net/pjW9y.png
Although I have checked out a similar issue on Stack Overflow and ensured that I am using labels, the problem still persists.
I have created a version of the issue on Plunker. Here is a snippet of my code:
Template:
<div style="display: block">
<canvas baseChart
[options]="chartOptions"
[data]="chartData"
[labels]="chartLabels"
[chartType]="chartType"></canvas>
</div>
<button (click)="addRandomValue()">Add Random value</button>
Component:
export class ChartComponent implements OnInit {
public chartType: string;
public chartData: number[];
public chartLabels: string[];
public chartOptions: any = {
responsive: true,
maintainAspectRatio: false
};
ngOnInit(): void {
this.chartType = 'line';
this.chartLabels = [ '1', '2', '3' ];
this.chartData = [ 0, 10, 20 ];
}
addRandomValue(): void {
this.chartData.push(Math.random() * 10 + 10);
this.chartLabels.push(this.chartData.length + '');
// weird workaround for refreshing data, works fine
// for all other chart types I tried it on
this.chartData = this.chartData.slice();
this.chartLabels = this.chartLabels.slice();
}
}
Is there a known solution for this issue, or is it possibly a bug?