Chart.js icon indicating copy to clipboard operation
Chart.js copied to clipboard

(During) a chart animation it prevent from loading a new chart using update('none')

Open heavyStuff3000 opened this issue 3 years ago • 4 comments

Expected behavior

When I update a chart that is doing some animation, using update("none"), it should instantly stop the animation it is doing, and switch to the other chart.

Instead it just keep animating the preceding chart and discard the new data

Current behavior

If I animate a chart, and then directly update('none') to a second chart, it won't load the second chart unless you wait until the first chart animation is done

Reproducible sample

https://codepen.io/nicolas-keroack/pen/gOegxyK

Optional extra steps/info to reproduce

No response

Possible solution

Love to the chart.js devs, wish I will be to your programming level one day. For now I will keep learning but I can't provide to the project yet even if i'd love to :p

Context

I have a page system, and need to reload the chart directly sometimes and sometimes with the animations

chart.js version

3.8.0

Browser name and version

Chrome 103.0.5060.114

Link to your project

No response

heavyStuff3000 avatar Jul 17 '22 04:07 heavyStuff3000

@heavyStuff3000 can you try to stop the animation before updating by myChart.stop();?

function second_chart() {
  myChart.data.labels = ["äpple", "orange", "banana", "pear", "peach", "raisins"];
  myChart.data.datasets[0].data = [22, 1, 21, 23, 21, 45];
  myChart.stop(); // <-- stops if animation is running
  myChart.update('none');
}

function first_chart() {
  myChart.data.labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
  myChart.data.datasets[0].data = [12, 19, 3, 5, 2, 3];
  myChart.update();
}

stockiNail avatar Jul 18 '22 08:07 stockiNail

It worked! But is it considered a bug or is it intended to be like this? thanks a lot!

heavyStuff3000 avatar Jul 18 '22 09:07 heavyStuff3000

I don't know if it's working as design. I think the update could check if there is a running animation and stop it as first thing. I think it's better do not close this issue in the meantime.

stockiNail avatar Jul 18 '22 09:07 stockiNail

I´m not sure if my case here is related, however i think so because when i set animation duration to 0 then its not doing that strange flicker. I´ve also tryed adding .stop as sugested. https://user-images.githubusercontent.com/35345288/190192998-63dbdbb0-ff50-4850-a303-6a9b54ae618f.mp4

BolverBlitz avatar Sep 14 '22 15:09 BolverBlitz