CODEWITHSUNDEEP
javascriptchart.js
Wolfone
Wolfone

Reputation: 1436

Chart.js updating-animations of radar-charts

I was not able to find an answer to the following what I think is best described by example:

I change one single value in radar-chart-data from 6 to 10 while the other ones stay the same. If I now trigger an update with non-zero animation-time it will repaint the chart while starting from zero for each value. I would prefer the animation to just animate the changing, i.e. a movement from 6 to 10 for the property in question. Is that possible?

Upvotes: 0

Views: 1055

Answers (2)

timclutton
timclutton

Reputation: 13014

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>

Upvotes: 2

caseyli
caseyli

Reputation: 71

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.

Upvotes: 2

Related Questions