javascript - Only first value added gets displayed in ng2-chart linechart -

i have simple line chart want add values when user clicks on button. whatever reason first value added (after initial values) displayed , values afterwards kind of cut of.

i'm aware of this similar issue i'm using labels , it's still not working correctly me.

i've made plunkr version of problem, here 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: = {         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 refreshing data, works fine         // other chart types tried on         this.chartdata = this.chartdata.slice();         this.chartlabels = this.chartlabels.slice();     } } 

is kind of bug or know how work around issue?

remove slice of labels, should trick

which means addrandomvalue() should this:

addrandomvalue(): void {     this.chartdata.push(math.random() * 10 + 10);     this.chartlabels.push(this.chartdata.length + '');      // weird workaround refreshing data, works fine     // other chart types tried on     this.chartdata = this.chartdata.slice(); }