Chartjs-Angular 4 line chart data is not showing data from http get

by

2👍

✅

This is a common issue with ng2-charts , you will have call a redraw method so ng2-charts know to update the chart.Because it isn’t watching for data changes, you have to manually tell it to update.

Inside your component

@ViewChild(BaseChartDirective) private _chart;

refer and refresh the chart as follows,

 forceChartRefresh() {
      setTimeout(() => {
        this._chart.refresh();
      }, 10);
    }


constructor(private dataService: DataService) {
    this.dataService.getIgnitions().then(ignitions => this.ignitions = ignitions);
    this.lineChartData = [{data: this.ignitions, label: 'Series Z'}];
    this.forceChartRefresh();
  }

Leave a comment