Angular2 Update ng2-charts with labels

Question

I am starting to work these days with Angular2, and have a question with the framework ng2-charts.

Here is my component.ts

Answer 1

first you to be sure that the order of labels is matching the order of the data_set, so basicly you have these two variables :

private datasets_pie = [
    {
        label: "Commissions",
        data: Array(),
        backgroundColor: Array()
    }
];
private labels_pie = Array();

secondly i had the same issue with the colors, so i had to insert the colors manually, here is an example :

private chartColors: any[] = [{ backgroundColor: ["#FFA1B5", "#7B68EE", "#87CEFA", "#B22222", "#FFE29A", "#D2B48C", "#90EE90", "#FF69B4", "#EE82EE", "#6A5ACD", "#b8436d", "#9ACD32", "#00d9f9", "#800080", "#FF6347", "#DDA0DD", "#a4c73c", "#a4add3", "#008000", "#DAA520", "#00BFFF", "#2F4F4F", "#FF8C00", "#A9A9A9", "#FFB6C1", "#00FFFF", "#6495ED", "#7FFFD4", "#F0F8FF", "#7FFF00", "#008B8B", "#9932CC", "#E9967A", "#8FBC8F", "#483D8B", "#D3D3D3", "#ADD8E6"] }];

finally after creating these object properly, you have to call this function :

setTimeout(() => {
            if (this.chart && this.chart.chart && this.chart.chart.config) {
                this.chart.chart.config.data.labels = this.labels_pie;
                this.chart.chart.config.data.datasets = this.datasets_pie;
                this.chart.chart.config.data.colors = this.chartColors;
                this.chart.chart.update();
            }
            this.sommeStat = this.getSomme();
        });

so i think that this might work :

    import { Component, ViewChild, ElementRef } from '@angular/core';
    import { ChartsModule } from 'ng2-charts';
    import { PredictionService } from './prediction.service';
    import { BaseChartDirective } from 'ng2-charts/ng2-charts';

    @Component({
      selector: 'prediction-result-chart',
      templateUrl: './predictionResultChart.component.html'
    })

    export class PredictionResultChartComponent{
        @ViewChild(BaseChartDirective) chart: BaseChartDirective;

      public pieChartType: string = 'doughnut';
        //public lineChartType: string = 'line';

        private datasets_pie = [
            {
                label: "Commissions",
                data: Array(),
                backgroundColor: Array()
            }
        ];
        private labels_pie = Array();

        //private datasets_line : LineData[] = [];
        // private datasets_line : { label : string, data : Array}[] ;
        // private labels_line = Array();

        private chartColors: any[] = [{ backgroundColor: ["#FFA1B5", "#7B68EE", "#87CEFA", "#B22222", "#FFE29A", "#D2B48C", "#90EE90", "#FF69B4", "#EE82EE", "#6A5ACD", "#b8436d", "#9ACD32", "#00d9f9", "#800080", "#FF6347", "#DDA0DD", "#a4c73c", "#a4add3", "#008000", "#DAA520", "#00BFFF", "#2F4F4F", "#FF8C00", "#A9A9A9", "#FFB6C1", "#00FFFF", "#6495ED", "#7FFFD4", "#F0F8FF", "#7FFF00", "#008B8B", "#9932CC", "#E9967A", "#8FBC8F", "#483D8B", "#D3D3D3", "#ADD8E6"] }];

        private options = {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        };
      public JSONobject = {}

      constructor(private predictionService: PredictionService){
        this.getPredictions();
      }

      public getPredictions() {
        this.predictionService.getPredictions('hello').do(result => this.populateChart(result)).subscribe();
      }

      public populateChart(obj): void{

        this.labels_pie = [];
        this.datasets_pie[0]['data'] = [];
        for (var i = 0; i < obj.predictions.length; i++)
        {
          labels.push(String(obj.predictions[i].class));
          this.datasets_pie[0]['data'].push(obj.predictions[i].percentage);
        };
let arrColors: any[];
        arrColors = arrColorsCopy.splice(0, this.products.length);
        this.datasets_pie[0]['backgroundColor'] = arrColors;

        setTimeout(() => {
                if (this.chart && this.chart.chart && this.chart.chart.config) {
                    this.chart.chart.config.data.labels = this.labels_pie;
                    this.chart.chart.config.data.datasets = this.datasets_pie;
                    this.chart.chart.config.data.colors = this.chartColors;
                    this.chart.chart.update();
                }
            });
      }

      public chartClicked(e:any):void {}
      public chartHovered(e:any):void {}

    }

for the html it should be looking like this :

thats all, you should try this way, it should work