ng2-charts bar graph not displaying data/graph labels

Question

I structured a horizontal bar graph using ng2-charts in angular2 but i am not sure why i am not seeing graph data nor am i seeing any errors in my console.

HTML:

<canvas baseChart [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>

Component:

  result: Iresult[] = [];

  barChartLabels: string[] =[];
  barChartType: string = 'horizontalBar';
  barChartLegend: boolean = true;
  barChartData: any[] = [];

  barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  barChartLabels: string[] =[];
  barChartType: string = 'horizontalBar';
  barChartLegend: boolean = true;
  barChartData: any[] = [];

getData(){
    this.dataService.getData().subscribe(
      data => {
        this.result = data;
        this.barChartLabels = this.result.map(item => item.label);
        console.log(this.barChartLabels); // RESULT: ["test 1", "test 2"]
        this.barChartData = this.result.map(item => item.data);
        console.log(this.barChartData); // RESULT: [25, 55]
      },
        error => this.errorMessage = <any>error);
        console.log(this.barChartLabels); // RESULT: []
        console.log(this.barChartData); // RESULT: []
  }

JSON file:

[
  {
    "id": 5,
    "label": "test 1",
    "data": 25
  },
  {
    "id": 6,
    "label": "test 2",
    "data": 55
  }
]

Service File:

getData(): Observable<IChartData[]>{
        return this._http.get('https://api.myjson.com/bins/ywavt')
            .map((res:Response) => <IChartData[]> res.json())
            .do(data => console.log('All: ' + JSON.stringify(data))) //DEBUG USE
            .catch(this.handleError);
    }

private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }

//Console do result: All: [{"id":5,"label":"test 1","data":25},{"id":6,"label":"test 2","data":55}]

Interface class

export interface IChartData {
    id: number;
    label: string;
    data: any;
}

UPDATE

Here is a Plunker of what i have so far: https://plnkr.co/edit/0GyFTkuqF7m8JhUKK6Kl?p=preview

Labels are not being displayed but a colored horizontal bar is not being positioned properly.

Answer 1

UPDATE 2

As the problem is still there when initializing the chart data async in subscribe, a working solution is to use a loading flag combined with *ngIf to wait for the data from the service to be loaded before initializing the chart.

That would look like this:

Template:

<canvas *ngIf="loaded" baseChart [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>

Component:

loaded = false;

getData(){
    this.dataService.getData().subscribe(data => {
      this.resultData = data;
      this.barChartLabels = this.resultData.map(item => item.label);
      this.barChartData = this.resultData.map(item => item.data);
      this.loaded = true;
    }
}

Here is a PLUNKER

UPDATE 1

According to your comment, this helped with displaying the data, but the labels are still not showing up. From the code you have provided, it's really hard to know why, but it's probably something wrong with your data. Can you log the barChartData and barCharLabels so I can have a look at it?

Here is a working plunker for your example, but with hard-coded data: PLUNKER

ORIGINAL

The ng2-chart is using ngOnChanges internally to catch changes of its input data. This means that modifying the arrays you have inputed to it will not trigger a change. And since your barChartLabels and barChartData array are already initialize as empty arrays, that is what the chart will use.

What you will need to do to trigger ngOnChanges is change the actual instances of barChartLabels and barChartData when you receive new data.

Replace this inside your getData method:

this.result.forEach( item => {
   this.barChartLabels.push(item.label);
   this.barChartData.push(item.dataInfo);
})

With something like this:

this.barChartLabels = this.result.map(item => item.label);
this.barChartDatat = this.result.map(item => item.dataInfo);