Stack Exchange
ng2-charts won't show updated labels, only data
I have an angular (2) application which uses the ng2-charts package. One of my components displays a piechart with data it queries from the server. The component is shown below:
export class PieChartComponent implements OnInit {
  data: Array<number> = [];
  labels: Array<string> = ['', '', '', ''];
  private line: string;
  private department: string;

  constructor(public dataService: LineService, private route: ActivatedRoute) {
    this.route.params.forEach((params: Params) => {
      this.department = params['dep'];
      this.line = params['id'];
    });
  }

  ngOnInit() {
    this.dataService.getLineTAL(this.department, this.line).forEach(result => {
      this.data = result.map(val => val.val);
      this.labels = result.map(val => val.tag);
    });
  }    
}

and the html:
<div style="display: block">
  <canvas baseChart [data]="data" [labels]="labels" [chartType]="'pie'" (chartClick)="chartClicked($event)" width="1" height="1"></canvas>
</div>

When running the debugger, I can verify that the this.labels is updated to correctly contain an array of strings which should be the values of the chart data labels. However, the chart renders with the correct data, but no values, so on hover over I get:

I am also not sure why the default colors have all changed to grey? I have this logic and UI working fine until I spun it out into it's own component. 
As noted in some other questions, I also tried adding this.chart.ngOnChanges({}); where chart is @ViewChild(BaseChartDirective) chart: BaseChartDirective; before the service call. I also tried this.labels = this.labels.slice(); at the end of the result mapping to try and force a refresh, but neither helped.
Update:
As noted in the comments, at the ngAfterViewInit event, the chart object contains the correct data and label properties (arrays). Yet is still not displaying properly. 

Have you debugged the resultant chart object you produce ?
Debug and check the properties of chart object when angular hits ngAfterViewInit() this would give you a clear indication of whether the Object has its properties set correctly.

@nugu The chart object gets logged at ngAfterViewInit and has property - labels: Array(4) 0:"station1",1:"station2",2:"station4",3:"station7" as well as the correct data property? Still can't see where the issue may be?

I personally haven't used ng2-charts but i recommend you to try run your chart properties on their example (http://plnkr.co/edit/7fGsiuRjcF0M0Ffeoml2?p=preview)
You can set your chart properties and see whether you receive the same result. Make sure you are on latest version

The problem with ng2-chart become when you try to update both properties at the time (labels and data), the easy solution is to set data directly and labels inside a 0 timeout:
ngOnInit() {
    this.dataService.getLineTAL(this.department, this.line).forEach(result => {
      this.data = result.map(val => val.val);
      setTimeout( () => {this.labels = result.map(val => val.tag)};
    });
  } 

With this, you must be done.  

On a side note, this now makes my unit test fail, any idea how I can make my expect line check that the setTimeout() line has executed correctly?

I spent 2 days fixing this. I tried everything on github issues and all. Thanks a lot.

I was facing a similar issue. I solved it by using a loaded flag.
Put your HTML code like this ->


<canvas *ngIf="loaded" baseChart [data]="data" [labels]="labels" [chartType]="'pie'" (chartClick)="chartClicked($event)" width="1" height="1"></canvas>



And your component.ts file as ->


export class PieChartComponent implements OnInit {
  data: Array < number > = [];
  labels: Array < string > = ['', '', '', ''];
  private line: string;
  private department: string;
  loaded = false;

  constructor(public dataService: LineService, private route: ActivatedRoute) {
    this.route.params.forEach((params: Params) => {
      this.department = params['dep'];
      this.line = params['id'];
    });
  }

  ngOnInit() {
    this.dataService.getLineTAL(this.department, this.line).forEach(result => {
      this.data = result.map(val => val.val);
      this.labels = result.map(val => val.tag);
    });
  }
  this.loaded = true;
}



