ng-charts not updating labels when chart data is updated at same time

Question

My ng2-charts component is not updating its labels when I update the charts data at the same time in ngOnChanges().

If i comment out the data var update in ngOnChanges()the labels update in the UI successfully. How can i get both my data and labels updated?

I would include my HTML and calling class but see no obvious issue - if you request it i will post it here.

Why does the labels not update when i un-comment my data update...the data updates just fine (along with other chart vars)

import { Component, Input, OnInit, NgZone, OnChanges } from '@angular/core';
@Component({
  selector: 'app-bar-chart-demo',
  templateUrl: './bar-chart-demo.component.html',
  styleUrls: ['./bar-chart-demo.component.css'],
  inputs:['chartLabel', 'chartData']
})
export class BarChartDemoComponent{
  public barChartOptions:any = {
    scaleShowVerticalLines:false,
    responsive:true
  };
  //Labels
  public barChartLabel:string[];
  @Input() chartLabel:string[];

  //Data
  public barChartData:any[];
   @Input() chartData:string[];

  ngOnChanges(){
   // this.barChartData=this.chartData;
  this.barChartLabel=this.chartLabel; 
  } 

   ngOnInit(){
     this.barChartLabel=this.chartLabel;

    console.log("in onInit "+this.chartData);
     this.barChartData=this.chartData;
   }
  }
}

My package.json shows the following charting libs

"chart.js": "^2.4.0", "ng2-charts": "^1.5.0",

Answer 1

i think that the right way to update the chart, specially the line chart with multiple lines is to import ViewChild and ElementRef in your component, then you must import the BaseChartDirective to create an instance of your chart, then you can update your data and labels of the chart.

so first you have to give the class = "chart" for the chart in the html

<div class="chart">
            <canvas baseChart [datasets]="barChartData" [labels]="barChartLabel"  [options]="barChartOptions">
            </canvas>
        </div>

if you notice i am using the datasets attribute to bind the data not the data attribute; now for the component you have to respect the structure of the data you're giving:

private datasets_lines: { label: string, data: Array<any> }[]

now the full code should be something like this:

    import { Component, Input, OnInit, NgZone, OnChanges, ViewChild, ElementRef  } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts/ng2-charts';
    @Component({
      selector: 'app-bar-chart-demo',
      templateUrl: './bar-chart-demo.component.html',
      styleUrls: ['./bar-chart-demo.component.css'],
      inputs:['chartLabel', 'chartData']
    })
    export class BarChartDemoComponent{
@ViewChild(BaseChartDirective) chart: BaseChartDirective;
      public barChartOptions :any = {
        scaleShowVerticalLines:false,
        responsive:true
      };
      //Labels
      public barChartLabel :string[];

      //Data
      public barChartData: { label: string, data: Array<any> }[]=[];

      ngOnChanges(){ 
// do your changes here
setTimeout(() => {
       this.barChartData=this.chartData;
      this.barChartLabel=this.chartLabel;
            //console.log(this.barChartData);
            if (this.chart && this.chart.chart && this.chart.chart.config) {
                this.chart.chart.config.data.labels = this.barChartLabel;
                this.chart.chart.config.data.datasets = this.barChartData;
                this.chart.chart.config.data.options = this.barChartOptions;
                this.chart.chart.update();
            }
        });
      } 

       ngOnInit(){
         this.barChartLabel=['23 mei', '24 mei', '25 mei', '26 mei', '27 mei', '28 mei', '29 mei'];

         this.barChartData=[
         { data: [15, 29, 24, 21, 26, 15, 10], label: 'Opening/Time' },
         { data: [11, 20, 27, 26, 22, 17, 11], label: 'Closing/Time' }
     ];
       }
      }
    }

Note: you have to check that the number of the data equals the number of the labels

you can check my other exemple on this link ng2-charts update labels and data