Chartjs-ChartJs: How to disable initial animation only

by

1👍

✅

What you can do is manually enable animations when you want them.
To be honest, I don’t think this is the best solution, but it works

var ctx = document.getElementById('myCanva').getContext('2d');

var config = {
  type:'line',
  data:{
    labels:[0,1,2,3,4,5,6,7,8,9],
    datasets:[{
      data:[1,2,5,8,9,2,4,15,2,20],
      label:'A',
    }]
  },
  options:{
    animation:false,
    plugins:{
      zoom:{
        zoom:{
          drag:{
             enabled:true,
          },
          mode:'x',
        }
      }
    }
  }
} 

var myChart = new Chart(ctx, config);


function update3rdValue(){
  config.options.animation = true;
  config.data.datasets[0].data[2] = Math.floor(Math.random() * 20);
  myChart.update();
  config.options.animation = false;
}

function zoom(){
  config.options.animation = true;
  myChart.resetZoom();
  config.options.animation = false;
}

function zoomNoAnim(){
  myChart.resetZoom();
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js" integrity="sha512-wUYbRPLV5zs6IqvWd88HIqZU/b8TBx+I8LEioQ/UC0t5EMCLApqhIAnUg7EsAzdbhhdgW07TqYDdH3QEXRcPOQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id="myCanva"></canvas>
<button onClick = "update3rdValue()">Edit 3rd value</button>
<button onClick = "zoom()">Reset Zoom</button>
<button onClick = "zoomNoAnim()">Reset Zoom without animation</button>

0👍

You can use a custom plugin to enable the animations after the first render using a custom plugin:

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    animation: false
  },
  plugins: [{
    id: 'customAnimation',
    afterRender: (chart, args, opts) => {
      if (chart.options.animation !== false)
        return;

      chart.options.animation = true;
    }
  }]
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.3/chart.umd.js"></script>
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Leave a comment