Skip to content

Add a way to skip animations on updates to a dataset #1006

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
1 task
MaxboDev opened this issue Jan 19, 2022 · 2 comments
Closed
1 task

Add a way to skip animations on updates to a dataset #1006

MaxboDev opened this issue Jan 19, 2022 · 2 comments
Assignees

Comments

@MaxboDev
Copy link

MaxboDev commented Jan 19, 2022

Would you like to work on this feature?

  • Check this if you would like to implement a PR, we are more than happy to help you go through the process.

What problem are you trying to solve?

I have a line chart where I want to be able to add data after its initially drawn. When I do that, it replays the initial animation where each point goes from 0 to its intended position but I'd like to avoid that.

In the chart.js docs it says that you can prevent animations by calling update with none as the mode here: https://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations

But in the react-chartjs-2 code it looks like updates are always done without a value passed for mode

chartRef.current.update();

Describe the solution you'd like

It would be great if it was possible to specify the mode to update the chart with, or provide some other mechanism to say that you dont want to animate for a particular update.

Alternatively if anyone knows of a way I can achieve this with the current implementation that would be super helpful.

Describe alternatives you've considered

I tried setting animation duration to 0 when sending the updated data and then setting it back afterwards but that didn't seem to work as it still animated and felt pretty hacky. Maybe i could set the animation duration in one render and then update the data, then set the anaimation duration back to its original value? I haven't tried that but it feels even more hacky.

Documentation, Adoption, Migration Strategy

No response

@dangreen dangreen self-assigned this Jan 19, 2022
@dangreen
Copy link
Collaborator

dangreen commented Jan 19, 2022

@M4sterShake Hi. It's a good point. But did you try to set redraw={true} prop as a temporary solution?

@MaxboDev
Copy link
Author

MaxboDev commented Jan 19, 2022

@M4sterShake Hi. It's a good point. But did you try to set redraw={true} prop as a temporary solution?

Thanks @dangreen I've just tried that but with redraw={true} it still performs the initial animation again. Don't suppose you have any other ideas? Your helps really appreciated :)

edit - i've just thought do you mean to use redraw={true} in conjunction with setting animation duration to 0 and back?

edit2 - I've tried setting redraw to true then adding the additional data and setting the animation duration to 0, then setting redraw to false and animation duration back to its original value but it doesnt seem to help. Thanks for the suggestion though!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants