Chart.js: how to update labels?

[zardaloop]

Hi nick,
I followed up this issue https://github.com/nnnick/Chart.js/issues/13 which at the end of it you have added a fantastic solution to be able to update the data series and then update the chart.
However I can't figure out how can I update the labels if the length of the data series and label values are different from the original dataset?

Many thanks

[nnnick]

I'm not sure if I completely understand?

So you can change existing values by changing the .value property on the bar/point and then call .update, then you can call .addData or .removeData to add/remove new points?

[zardaloop]

Hi Nick,
Thanks for getting back to me.
I don't want to remove only one point. I want to be able to replace the whole data in a dataset. for example :
myLiveChart.datasets[1].data = [1,2,3,4,5]

However at the moment I cant do that, because in order to be able to replace the data I should replace the labels since the new dataset has different length of data and the labels are different values.

In your example in http://jsbin.com/yitep/4/edit, labels are "labels: [1, 2, 3, 4, 5, 6, 7]", and they never change, but my question is how can I change the labels array? Because if want to be able the correct data as well as replacing the dataset's data I should change the labels as well, because the length of both should be the same.

I would highly appreciate any suggestion on that.

[willemx]

+1
I have the same wish: changing the labels when updating the data. (BTW: No need for me to change the nr of elements in the dataset)

[pederan]

+1 Me too

[fulldecent]

Hello, this issue looks like an ERROR REPORT, for something not correctly implemented in Chart.js. It would be very helpful if you could please create an example chart that would illustrate this missing feature using JSBIN and even attached a mockup here of what the result should look like.

To help, I have created a simple JSBIN which you could fork:
http://jsbin.com/yozobahucero/1/edit?html,js,output

Sorry that this response is templated as we are triaging many issues and ones with test cases will be seen first.

[rocketblr]

I did some quick investigation and found the workaround:
myLineChart.scale.xLabels = ["label1", "label2", "label3"];
myLineChart.update();

[dja]

+1: Experiencing an issue where updating the labels updates them in the tooltips, but not on the axis. Unfortunately this issue is intermittent.

[mpgarate]

+1 Has there been any update? I have not been able to get a workaround on this.

[amazing-gao]

+1 how to update labels

[dja]

I've now just changed my own use to just replace the chart with a fresh one, instead of trying to animate and append updates.

[dw2]

+1 Does anyone have a workaround that doesn't include redrawing the entire chart? I can update the chart.datasets[0].bars[0].label value, but the canvas keeps the old label even after calling update().

[tannerlinsley]

I have a workaround, but it's cumbersome. We're working on a nice PR that will likely fix any issues anyone is having with updating an existing chart and likewise animating those changes.

[dw2]

@tannerlinsley Thanks for the update. I've implemented a workaround that removes the animation only when I need updated labels so that users don't see the re-animation when I redraw the chart.

[leijing7]

Still can not update the labels?
Looks like have to redraw the whole thing.

[roger-]

Can someone post a simple workaround for this issue?

Ideally I'd like to be able to update multiple y-values and labels (x-values) at once.

[rocketblr]

Doesn't my solution posted on Oct 2 work?

[roger-]

@rocketblr

Thanks, missed that and it indeed seems to work!

Are there any gotchas when updating scale.xLabels and scale.yLabels this way?

[rocketblr]

Be careful when you need to change number of labels. In that case you should combine updating labels with adding or removing data to chart.

[roger-]

Ah, ok. I'll assume I need to call .addData() or .removeData() as many times as necessary to get the right number of labels. Would also be nice if there was a cleaner way to do this, but that works for now.

[leewisestamp]

+1

[yusufozturk]

+1. Any updates on this?

I use a top chart, so items position could be changed. After update, i see that labels are updated, but xLabel is still old on bar chart.

As you can see from picture, VMSQL01 is now top 1, label is updated but xLabel is still shown as vSAN01.

This is code that I used:

i = 0;
while (i < valueLength) {
barChart[index].datasets[0].bars[i].value = newData.values[i];
barChart[index].datasets[0].bars[i].label = newData.labels[i];
barChart[index].datasets[0].bars[i].fillColor = newData.color[i];
barChart[index].datasets[0].bars[i].highlightFill = newData.highlight[i];
barChart[index].update();
i++;
}

[tannerlinsley]

Have you tried using 2.0 alpha?

[yusufozturk]

Hi Tanner,

Can we use Alpha in production? If not, do you have an ETA for production ready version?

Thanks.

[tannerlinsley]

Alpha is not production ready. It is coming as soon as possible though. I can’t give an ETA :( But it’s going to be amazing!

[tannerlinsley]

We just want to assess as many issues in 2.0 as possible. So we are asking that everyone try their luck at it and help us with feedback.

[tannerlinsley]

As @rocketblr has explain in his Oct. 2nd post how to do this, and it is much more easily supported in 2.0, we're closing this issue for now. Thanks for all of the feedback and be sure to help us get 2.0 ready for release!

[nielssj]

Incase anyone is wondering how to do this in 2.0, this works for me:
lineChart.config.data.labels = newLabels
lineChart.update()

[imran7404]

I have the same problem. I am creating a chart by dynamically assigning value to both labels and dataset. But at certain point, label are not showing. label data is generating but not showing.

[arthas009]

intervals variable is my new interval for x axis. I'm using it as an array. Sample code is shown below.

```
let intervals =[];

    /*
    * CALCULATE INTERVAL STRING ARRAY FOR CHART.JS 
    * You can arrange variable 'limit' from an html input and trigger and event with button
    */
    for(let k = 0;k<=limit;k++)
    {
        intervals.push(""+k);
    }

Code below is working for me. 

myChart.data.labels = intervals;
myChart.update();

  Besides i'm using chart with React.js and pan/zoom plugin shown below.

this.state.myChart.data.labels = intervals;
this.state.myChart.update();
this.state.myChart.resetZoom();
```