Ng2-charts: X-axis labels not refreshing when chartLabel array is updated

[singhrasster]

I am using bar chart. My HTML markup is:

[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[colors]="chartColors"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">

In Typescript, when I dynamically change the values of the array barChartLabels, the new labels (X-axis labels) are not displayed on the chart. Changing the value of the array barChartData updates the values on the graph though.

My question is why the X-axis labels dont change when I update the array barChartLabels with new values? Is it a bug?

In the ng2-charts node module downloaded,
node_modules\ng2-carts\charts\chart.js

When I update the method: ngOnChanges and add this.refresh() after this.chart.update(), the labels are refreshed correctly. Should this directive be updated at your end to add this.refresh() to fix this issue?
I am not finding a way to achieve the same result by any changes in my Typescript code and obviously I cannot add this fix at my end in node_modules\ng2-carts\charts\chart.js as this is something thats not part of the app but something that gets downloaded as part of the dependencies. Can you please suggest what I should do? And also please confirm that this is a bug or there is already a solution which I am missing?

[potatopeelings]

@singhrasster - I set up a Plunker and it seems to be working http://plnkr.co/edit/3rIcEUtewvN34HCDCQLK?p=preview. Could you try modifying it to replicate your issue? Cheers!

[donmahallem]

I am facing the same problem. For some reason the labels do not get updated. Tried it with ngZone but no luck so far. Couldn't test it by now but my next guess would be these lines as they only update on data(sets) but not on label changes which should get the same treatment imho.

[Jiig]

Having the same issue. Only workaround I've found is to nullify my data array before updating and wrap the chart with an ngIf of the data array, thus forcing a complete redraw of the chart when data updates and the array gets reinitialized.

Which is just an awful hack :/

[potatopeelings]

@Jiig @donmahallem - could you set up a plnkr showing the issue? Or better still modify the plnkr in my comment to replicate your issue? Cheers!

[donmahallem]

Will try to setup the plunker accordingly, but I think I found the root cause.

I think the reason for this bug was, that if the ngOnChanges event gets called with BOTH labels and data(sets) data updates the condition skips recreating the Chart with new the labels and just renders the data. If you update just the labels, the first condition gets skipped and the Chart gets recreated with the new Labels and the Old data.

I try to verse this a little better in the PR I will create

[donmahallem]

Just saw someone else had similar issues in #632 and similar solution.

[donmahallem]

Pull Request #615 contains same solution and is still open too

[ansuman273]

Facing the same issue for a long time ; now able to fix it with use of this fantastic article . You could follow this too http://techqa.info/programming/question/42629819/ng2-charts-update-labels-and-data

[Praveen2345]

The trick is in clearing the label and data array, the below code didnt work for me :(

clearCharts() {
    this.barChartLabels= [];
    this.barChartData= [
      {data: [], label: 'label1'},
      {data: [], label: 'label2'}
    ];
  }

However when I changed the way I cleared the data helped me (Using object reference)
clearCharts() { this.barChartLabels= []; this.emptyChartData(this.barChartData); } emptyChartData(obj) { obj[0].data = []; obj[1].data = []; obj[0].label = 'label1'; obj[1].label = 'label2'; }

[mynamerahulkumar]

Angular 2
I have initilized chartlabel on every click of graph display.
this.lineChartLabels=[];
I have put condition in div untill data comes to chartlabels ,do not render the graph

<div *ngIf="lineChartLabels!=0">
it works for me

[HT154]

I stumbled across this issue and actually managed to work out a (still icky) solution. Here's my function for replacing the data and labels in a chart simultaneously:

setNewData(sourceList) {
  this.LineChartData = this.getData(sourceList);
  setTimeout(() => this.LineChartLabels = this.getLabels(sourceList), 0);
}

This would also work well inside an ngOnChanges function for handling sourceList as an input variable.

[zourtney]

Similar to @HT154's suggestion, manually calling detectChanges seems to work too. It seems equally gross. I'm not sure about the performance repercussions.

constructor(private cdRef: ChangeDetectorRef) { }

updateData() {
  this.chartData = /* new data */;
  this.cdRef.detectChanges();
  this.chartLabels = /* new labels */;
}

[paviad]

This package has been updated for Angular 7 with many bug fixes and improvements. If this issue persists, feel free to reopen.

[glenatron]

I still have this problem in version 2.2.4 - My xAxes type is time and it seems to render correctly the first time I set the min and max dates but after that they stay the same when I change the options.

it can be worked around by including @ViewChild("baseChart", { static: false }) chart: BaseChartDirective; then calling this.chart.ngOnInit() after updating the axes. If I don't do this, the axes will not change when I change the min and max values.