Ng2-charts: Dynamically change generated labels not worked

[jerkly]

Version: ng2-charts v1.5.0

Reproduction of the problem
http://plnkr.co/edit/Ggp7hasnGBsKTlq8hu1R?p=preview

Probably dynamically change generated labels feature was removed by this PR #563 .

related task to this feature #445

[jerkly]

@m0t0r

[m0t0r]

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

[stojankukrika]

When it will be in production version?

[cnd5041]

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

[stojankukrika]

I move to https://www.npmjs.com/package/angular2-highcharts and thy make it to works perfect! Use it and enjoy ;)

[jerkly]

ref to #592

[jakeNesom]

@stojankukrika - I edited your plunkr to match my issue which i believe is similar to the one described here (labels not changing)

Everyone else - is this issue similar to the original or should I create a new issue?

My issue happens when the labels array length or data array length changes from what was in the component on initialization

In my example, if you click the "change2" button, the labels[] and data[] are replaced with a new labels array and new data array. However, somehow the chart visuals won't update to show the new information - it's like the labels and data array length are still set to their original values

http://plnkr.co/edit/gVprkAvV4cycpl9mUrtI?p=preview

[giumarzo]

I resolved the problem with this method https://github.com/Puigcerber/ng2-charts/commit/1ae41eeb53df6e6b2afad84ce95de172aa0951b9

[nikkwong]

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.

[andrewkhan1]

@nikkwong Would have to agree with you here. Everything about this library is terrible.

[t-moritsugu]

this works...
chart.[email protected]
[email protected]

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();
        }
    }
};

[MinsuLim]

@t-moritsugu
It works perfectly for me also.
Thank you very much.

[jjosef]

Why is this not merged? Is someone maintaining this project any longer?

[ratshidaho]

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>

[danielfein]

This worked for me, editing ng2-charts.umd.js (or /charts/charts.js for some):
BaseChartDirective.prototype.ngOnChanges = function (changes) {
if (this.initFlag) {
// Check if the changes are in the data or datasets
// console.log(changes);
// console.log(changes.currentValue);
if (changes.hasOwnProperty('data') || changes.hasOwnProperty('datasets')) {
if (changes['data']) {
this.updateChartData(changes['data'].currentValue, changes['data'].currentValue.length);
}
else {
// console.log(changes['datasets'].currentValue);
this.updateChartData(changes['datasets'].currentValue, changes['datasets'].currentValue.length);
// console.log(this);
}
// 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();
}
}
};

BaseChartDirective.prototype.updateChartData = function (newDataValues, lengthOfChanges) {

        var colors = [
            [255, 99, 132],
            [54, 162, 235],
            [255, 206, 86],
            [231, 233, 237],
            [75, 192, 192],
            [151, 187, 205],
            [220, 220, 220],
            [247, 70, 74],
            [70, 191, 189],
            [253, 180, 92],
            [148, 159, 177],
            [77, 83, 96]
        ];
            for (var i = 0; i < lengthOfChanges; i++) {
                    newDataValues[i].backgroundColor = "rgba("+colors[i][0]+","+colors[i][1]+","+colors[i][2]+", 0.4)";
                    newDataValues[i].borderColor = "rgba("+colors[i][0]+","+colors[i][1]+","+colors[i][2]+", 1)";
                    newDataValues[i].borderColor = "rgba("+colors[i][0]+","+colors[i][1]+","+colors[i][2]+", 0.8)";
                    newDataValues[i].pointBackgroundColor = "rgba("+colors[i][0]+","+colors[i][1]+","+colors[i][2]+", 1)";
                    newDataValues[i].pointBorderColor = "#fff";
                    newDataValues[i].pointHoverBackgroundColor = "#fff";
            }
            this.chart.data.datasets = newDataValues;

};

[paviad]

This package has been updated for Angular 7, with many bugs fixed and features added. I believe this issue is now resolved. If not, please provide a stackblitz/codepen/... example showing it.