Ng2-charts: Barchart can not dynamically change the number of series

[villaratio]

Example:
http://plnkr.co/edit/J4GFtSZWol0ehkzaCXZP?p=preview

When the barchart first starts with a dataset containing 2 series, then afterwards you can
update the values of those series, but you can not change the amount of series dynamically.

[villaratio]

I found an example showing that chart.js does support this:
https://jsfiddle.net/flivni/Lcnj1e5x/

[villaratio]

I found a workaround by using *ngIf to temporarily hide/show the chart
http://plnkr.co/edit/1ibWwJPOsICkVkCJq9df?p=preview

This probably causes the entire chart to be recreated.

But I'd prefer a nicer fix?

[zovjunice]

You can update method updateChartData :

` BaseChartDirective.prototype.updateChartData = function (newDataValues) {
if (Array.isArray(newDataValues[0].data)) {
// update just values if dataset is same as new data
if(this.chart.data.datasets.length === newDataValues.length) {
this.chart.data.datasets.forEach(function (dataset, i) {
dataset.data = newDataValues[i].data;
if (newDataValues[i].label) {
dataset.label = newDataValues[i].label;
}
});
} else {
// recreate dataset because new data is not the same size wised
this.chart.data.datasets = this.getDatasets();
}

    }
    else {
        this.chart.data.datasets[0].data = newDataValues;
    }
};`

Inside ng2-charts\charts\charts.js line 87

[juliengloria]

Thx zovjunice 👍 It works
How can I use it for deployed solution ?

[slobodansmaardzic]

I think you need to fork to your own repo and to actually apply changes inside ts as I remember and use your own repo inside deploy process.

[xemle]

@ac3ju Could you publish a PR of your fix?

[juliengloria]

I use https://www.npmjs.com/package/ng2-charts-x
It's the same, without all this bugs :)

[xemle]

@ac3ju This drop-in replacement works perfect. Thanks!

[paviad]

Closing for inactivity. This package has been updated for Angular 7, with many bugs fixed. If this issue persists please provide a stackblitz/codepen/... example that shows it.