Set animation dynamically in Chart.JS

I try to set animation dynamically in Chart.js. It should be either enabled or disabled based on some condition.

But it is always either enabled or disabled for some reason.

I’ve made a JSFiddle to better describe my issue

Check out the code below:

<div class="container">

   <button onclick="chart(true)">ANIMATION</button>

   <button onclick="chart(false)">NO ANIMATION</button>
    
   <div id="animation-info"></div>
 
   <canvas id="chart-container" width="300" height="200"></canvas>

</div>

let animation = true
let CHART

chart(animation)


function chart(animation) {

  const anim_duration = animation == false 
  ? { duration : 0 }
  : { duration : 1000 }
  
  document.getElementById('animation-info').innerHTML =  `<br>Animation: ${animation} <br> Animation duration: ${anim_duration.duration}`

  
  // generate dataset with random values
  // random values are actual chart values here
  var dataset = Array.from( { length: 6 }, () => Math.floor(Math.random() * 6 + 1 ))
  
  var options = {
    type: 'doughnut',
   
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
          label: '# of Votes',
          data: dataset,
          backgroundColor: [ "Red", "Blue", "Yellow", "Green", "Purple", "Orange" ],
          borderWidth: 1,
        }
      ]
    },
    options: {
       animation: anim_duration,
       cutoutPercentage : 60,
       responsive: true,
    }
  }
  
  var ctx = document.getElementById('chart-container').getContext('2d')


  if (typeof CHART == "undefined")
        CHART = new Chart(ctx, options)

  else {
        CHART.config = options  // updating with new chart data
        CHART.update()               // redraw the chart
  }
}

.container {
  text-align: center;
  padding: 20px;
}

#animation-info {
  padding: 5px;
  font-size: 16px;
  font-family: Arial;
}

canvas { 
  opacity : 0.7; 
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  margin: 10px;
}

I have also tried to set the option directly like

Chart.defaults.global.animation.duration = duration

Seems to be the same issue.

---

I believe the issue is because I don’t invoke new Chart(ctx, options) every time, but update chart configuration data only.

I do this to save resources because I rebuild the chart lots of times and invoking new Chart(ctx, options) every time seems to be a pretty heavy operation.

[kurkle]

Not sure what the issue is in v2.9.4. Works in v3: https://jsfiddle.net/4v8p2gyt/1/

[etimberg]

Thanks @kurkle, will marked this as fixed in v3.