CODEWITHSUNDEEP
javascriptchart.jschart.js2
Systems Rebooter
Systems Rebooter

Reputation: 1399

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

enter image description here

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.

Solution:

As LeeLenalee suggested in his comment below adding

CHART.options.animation.duration = animation == false ?  0 : 1000`

before CHART.update() did a trick

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

else {
     CHART.config = options  // updating with new chart data
     CHART.options.animation.duration = animation == false ? 0 : 1000
     CHART.update()               // redraw the chart
}

Upvotes: 0

Views: 1066

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31401

You are trying to set the options wrong. Both versions work. If you want to set it as default you will have to put it like this: Chart.defaults.global.animation.duration = animation ? 1000 : 0. You can also put it in your options object like this:

const anim_duration = { duration : animation ? 1000 : 0 }

options: {
  animation: anim_duration
}

Fiddle: https://jsfiddle.net/Leelenaleee/58pxb1j2/9/

EDIT after comment clarification: Set the animation in your update method CHART.options.animation.duration = animation ? 1000 : 0; then call the update.

Upvotes: 1

Related Questions