Chartjs-Chart.js updating-animations of radar-charts

by

2👍

✅

Below is an example showing the chart updating without redrawing. Run the snippet and press the ‘Update’ button to increase data point b by 1 each time.

let myChart = new Chart(document.getElementById('chart'), {
  type: 'radar',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e'],
    datasets: [{
      label: 'series1',
      data: [0, 2, 7, 10, 3]
    }]
  },
  options: {
    maintainAspectRatio: false
  }
});

document.getElementById('update').addEventListener('click', function() {
  myChart.data.datasets[0].data[1] += 1;
  myChart.update();
});
<button id="update">Update!</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>

2👍

Yes. It is possible. It depends on how you update the chart option. See chartjs documentations

To update the options, mutating the options property in place or passing in a new options object are supported.

  • If the options are mutated in place, other option properties would be preserved, including those calculated by Chart.js.

  • If created as a new object, it would be like creating a new chart with the options – old options would be discarded.

Leave a comment