Chart.js redraw chart for which rendering is in progress

Question

I am using a chart.js 3.x JavaScript library for displaying charts.
I need to update the chart for which rendering is in progress.
I am using JavaScript Worker for updating the chart data.

for (var index=0;index < myjson.length;index++) {           
    chart.data.datasets[index].data.push(myjson[index]);
}
chart.update();

I am doing something like below to clean the chart dataset.

// Set the empty data and render the chart to clear the data 
for (var index=0;index < chart.data.datasets.length;index++) {           
    chart.data.datasets[index].data = [];
}
chart.update();

But I see a few of the lines are still on the chart and not cleared properly.
May be continuous drawing is causing this issue.
I have also tried to clear() and reset() the chart but no effect.
So how to clear the chart data properly and redraw new dataset.

score 0 · Answer 1 · answered Sep 24 '20 at 12:00

use stop() to end the current animation loop,
then clear the data, and update the chart without animation.

see following working snippet,
once the animation progress reaches 50%,
the animation is stopped, the data is cleared, and the chart is updated without animation...

$(document).ready(function() {
  var offset = [100, 100, 100, 100];
  var data = [7900, 5400, 4300, 4300];
  var ctx = document.getElementById('bar-chart');
  var data = {
    labels: ['June 9', 'June 11', 'June 13', 'June 15'],
    datasets: [{
      data: offset,
      backgroundColor: 'transparent'
    }, {
      data: data.map(function (value, index) {
        return value - offset[index];
      }),
      backgroundColor: 'orange'
    }]
  }
  var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
      animation: {
        onProgress: function(animation) {
          var progress = animation.currentStep / animation.numSteps;

          // determine if progress is above 50%
          if (progress >= 0.5) {

            // stop current animation loop
            animation.chart.stop();

            // remove labels and data
            for (var i = chart.data.labels.length - 1; i >= 0; i--) {
              animation.chart.data.labels.pop();
            }
            for (var i = chart.data.datasets.length - 1; i >= 0; i--) {
              animation.chart.data.datasets.pop();
            }

            // update without animation
            animation.chart.update(0);
          }
        }
      },
      legend: {
        display: false
      },
      tooltips: {
        enabled: false
      },
      scales: {
        yAxes: [{
          stacked: true
        }]
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="bar-chart"></canvas>

thanks but for my chart, I have the `animation` set to `false`. I am trying with `chart.clear()` and `chart.stop()` sometimes it does stop the rendering and I see updated chart from the beginning but sometimes it fails. — User7723337, Sep 24 '20 at 12:20
I only used animation here to form an example. but how are you intervening a render operation if you are not using animation? wouldn't it be drawn synchronously with animation set to false? — WhiteHat, Sep 24 '20 at 12:23
As the live data getting updated in the chart, to make the optimal performance I have disabled the animation in the chart configuration. I have added a check inside the loop where I am pushing the data inside the `chart.data.dataset`. If that flag is true then I don't push the data and I clear the data that is in the dataset by setting it `chart.data.dataset[0].data = []` and I call `chart.update(0)`. This way it works but sometimes I see chart is not getting cleared properly and some of the data/lines are on the chart. — User7723337, Sep 24 '20 at 12:31

Chart.js redraw chart for which rendering is in progress

1 Answers1