How to update data Chart in async way in Angular Chart.js?

Question

I've project based on ngx-admin starter empty (without all libraries). I imported angular2-chartjs lib in package.json. The Chart is drawn correctly.

I need to update data of chart when I receive response from server, in async way.

I read the documentation of Chart.js which reports this way for updating data, in the following manner:

    function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
    }

But this is ChartJs, while ngx-admin use angular2-chartjs.

In my component I initialized the chart with empty data:

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'performance',
  template: `
  <chart type="line" [data]="data" [options]="options"></chart>
`,
  styleUrls: ['./performance.component.scss'],
})
export class PerformanceComponent implements OnDestroy {
  private PERFORMANCE_ENDPOINT = environment.performanceREST;
  data: any;
  options: any;
  themeSubscription: any;

  constructor(private theme: NbThemeService, private restService: TableService, http: Http) {
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

      const colors: any = config.variables;
      const chartjs: any = config.variables.chartjs;

      this.data = {
        labels: [],
        datasets: [{
          data: [],
          label: '',
          backgroundColor: NbColorHelper.hexToRgbA(colors.primary, 0.3),
          borderColor: colors.primary,
        }, {
          data: [],
          label: '',
          backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.3),
          borderColor: colors.danger,
        }, {
          data: [],
          label: '',
          backgroundColor: NbColorHelper.hexToRgbA(colors.info, 0.3),
          borderColor: colors.info,
        }],
      };

      this.options = {
        responsive: true,
        maintainAspectRatio: false,
        elements: {
          line: {
            tension: 0,
            fill: false,
          },
        },
        scales: {
          xAxes: [{
            gridLines: {
              display: true,
              color: chartjs.axisLineColor,
            },
            ticks: {
              fontColor: chartjs.textColor,
            },
          }],
          yAxes: [{
            gridLines: {
              display: true,
              color: chartjs.axisLineColor,
            },
            ticks: {
              fontColor: chartjs.textColor,
            },
          }],
        },
        legend: {
          labels: {
            fontColor: chartjs.textColor,
          },
        },
      };
    });

    // ## HERE I WOULD LIKE TO IMPLEMENT REST HTTP TO RETRIEVE DATA FROM SERVER ##
    // this.restService.endPoint = this.PERFORMANCE_ENDPOINT;
    // this.restService.getElements()
    //   .then((result) => {
    //     // tslint:disable-next-line:no-console
    //     console.log('PerformanceRESULT: ' + result);
    //     this.data.datasets.forEach((dataset) => {
    //       dataset.data.push(result);
    //     });
    //   });
  }

  protected addData(chart, label, data) {
    this.data.labels.push(label);
    this.data.datasets.forEach((dataset) => {
      dataset.data.push(data);
    });
    // chart.update();
  }

  protected removeData(chart) {
    this.data.labels.pop();
    this.data.datasets.forEach((dataset) => {
      dataset.data.pop();
    });
    // chart.update();
  }

  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }
}

Someone here would know advise to resolve my problem? (an example is appreciated).

Thank you

Answer 1

It seems change detection is not triggered https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

I fixed my case by updating the whole options object