ng2-charts: Dynamically change generated labels not worked

Yeah, this library stinks. Docs stink, you have to fiddle around with everything to make it work. Extremely hard to get it to work with async/changing data. Overall terrible experience and leaves a bad taste in my mouth for valor-software.

For those looking for a walk around, for now you can put your labels and data in an object and put that object in an array and just loop through the array in your html. This will redraw the element every time your array changes.

in your type script every time there’s a change. data = [...]; labels = [...]; chartArray = [{data , labels }]

in your html

<canvas *ngFor="let chartData of chartArray " [data]="chartData.data" [labels]="chartData.labels" > </canvas>

this works… chart.js@2.6.0 ng2-charts@1.6.0

ng2-charts/charts/charts.js

BaseChartDirective.prototype.ngOnChanges = function (changes) {
    if (this.initFlag) {
        // Check if the changes are in the data or datasets
        if (changes.hasOwnProperty('data') || changes.hasOwnProperty('datasets')) {
            if (changes['data']) {
                this.updateChartData(changes['data'].currentValue);
            }
            else {
                this.updateChartData(changes['datasets'].currentValue);
            }
            // add label change detection every time
            if (changes['labels']) { 
                if (this.chart && this.chart.data && this.chart.data.labels) {
                    this.chart.data.labels = changes['labels'].currentValue;    
                }
            }
            this.chart.update();
        }
        else {
            // otherwise rebuild the chart
            this.refresh();
        }
    }
};

In the mean time, in case you need it, here’s a plkr that updates the labels ‘manually’. http://plnkr.co/edit/Ra6cfYkctsq3ZnqxTHYf?p=preview

hey, @jerkly, I made a PR fixing your issue.