chartjs update() not updating

Question

UPDATE:

I've solved the issue and the reason is that these ten charts all named 'rank_chart' and I found that even though these ten charts get their own unique id but for the chart element they're the same. Because of that, the updating data of chart id='rank-1' to chart id='rank-9' were covered by updating data of id='rank-10'.

To solve that, just put all chart element into array then update them Individually.

JS part

    var rank_chart;
    var numberIdArr = ['first','second','third','fourth','fifth'];
    var valueArr = [1,2,3,4,5];    
    var chartArr = new Array; //array for all charts

    $('canvas[id^="rank-"]').each(function(){
        rank_chart= new Chart($(this), {
            type: 'bar',
            data: {
                labels: numberIdArr,
                datasets: [{
                    barPercentage: 0.5,
                    barThickness: 6,
                    maxBarThickness: 8,
                    minBarLength: 2,
                    data: valueArr 
                }]
            },
            options: {
                ...
            },
        });
        chartArr.push(shipRank_chart);//push to arr
        return rank_chart;
    });

update function

    function update_chart_data(id){
        for (var m = 0 ; m < chartArr.length; m++) {
            var id = chartArr[m]['id'];
            var update_data = data_array2[keyArr2[id]];
            var data = chartArr[m].chart.config.data;
            // unset
            data.datasets[0].data.length = 0;
            data.labels.length = 0;
            // get update data
            for(var i = 0; i < update_data.length ; i++){
                data.labels.push(update_data[i]['numberId']);
                data.datasets[0].data.push(update_data[i]['value']);
            }
            
            // update each chart individually
            chartArr[m].update();
        }
    }

Hope this would be helpful if you got the same issue.

ORIGINAL POST:

I've got an issues with ChartJS updating. There're 10 charts sharing the same chart option in one web page.

<canvas id="rank-1" value="1"></canvas>
<canvas id="rank-2" value="2"></canvas>
<canvas id="rank-3" value="3"></canvas>
<canvas id="rank-4" value="4"></canvas>
<canvas id="rank-5" value="5"></canvas>
<canvas id="rank-6" value="6"></canvas>
<canvas id="rank-7" value="7"></canvas>
<canvas id="rank-8" value="8"></canvas>
<canvas id="rank-9" value="9"></canvas>
<canvas id="rank-10" value="10"></canvas>

And the JS part

    var rank_chart;
    var numberIdArr = ['first','second','third','fourth','fifth'];
    var valueArr = [1,2,3,4,5];

    $('canvas[id^="rank-"]').each(function(){
        rank_chart= new Chart($(this), {
            type: 'bar',
            data: {
                labels: numberIdArr,
                datasets: [{
                    barPercentage: 0.5,
                    barThickness: 6,
                    maxBarThickness: 8,
                    minBarLength: 2,
                    data: valueArr 
                }]
            },
            options: {
                title: {
                    display: false,
                    text: "rank"
                },
                responsive: true,
            },
            
        });
        
        return rank_chart;
    });

At first, these ten charts will have the same data array numberIdArr and valueArr. Then, I will change these two array differently in function update_chart_data for each chart.

        function update_chart_data(id){
        
            $('canvas[id^="rank-"]').each(function(){
                var id = parseInt($(this).attr('value'));
                id --;
                var i;
                var update_data = data_array2[keyArr2[id]];//here is to get update data
                var new_numberIdArr = [];
                var new_valueArr = [];
                for(i = 0; i < update_data.length ; i++){
                    update_data[i]['numberId'] = update_data[i]['numberId'];
                    new_numberIdArr.push(update_data[i]['numberId']);
                    new_valueArr.push(update_data[i]['value']);
                }
                
            
                var data = rank_chart.config.data;
                data.datasets[0].data = new_valueArr;
                data.labels = new_numberIdArr;
                
                rank_chart.update();
            });

        }

There'll be no console error and if I log data.datasets[0].data and data.labels in the web console, they are all updated successfully. However, the charts will not be updated so I think the problem might be line rank_chart.update(). But I got no idea how to solve that, anyone know how to fix that?

bigless bigless · Accepted Answer · 2020-08-04T20:02:16

If I rememeber, chart.js assigns these objects to own variables passed by reference so try mutating in place instead of assigning(=) to config property.

function update_chart_data(id){
  $('canvas[id^="rank-"]').each(function(){
      var id = parseInt($(this).attr('value'));
      id --;
      var i;
      var update_data = data_array2[keyArr2[id]];//here is to get update data
      var data = rank_chart.config.data;
      data.datasets[0].data.length = 0;
      data.labels.length = 0
      for(i = 0; i < update_data.length ; i++){
          data.labels.push(update_data[i]['numberId']);
          data.datasets[0].data.push(update_data[i]['value']);
      }

      rank_chart.update();
  });
}

chartjs update() not updating

1 Answers