hover.animationDuration:0 doesn't disable animation tooltip with datalabels plugins

[dutrieux]

When I use datalabels plugins with options.hover.animationDuration:0 (to disable animation with tooltip), the animation is not disable. If I remove the plugin Datalables (by removing chartjs-plugin-datalabels.js), the animation of tooltip is properly disable.

Test case : https://jsfiddle.net/dutrieux/w2vzeo3b/
Video for demo : https://youtu.be/Pd293lqSpK8

[rpearce]

Thank you for reporting this! I spent hours trying to track this down.

[etimberg]

A possible workaround here is to set animation.duration to 0 if the initial animation isn't needed for your use case

[etimberg]

Looks like this is fixed with the current master branch of the main chartjs repo. fiddle

It appears that chartjs/Chart.js#5331 was the solution. The previous code fallsback to animation.duration hence why the workaround I mentioned above works. I'm still not entirely sure why the plugin enables this behaviour though.

[rpearce]

A possible workaround here is to set animation.duration to 0 if the initial animation isn't needed for your use case

Thanks, but I unfortunately require the initial animations but need to alter the ones for hover, only :(

---

So is this not an issue with this plugin, specifically?

[simonbrunel]

@etimberg I don't think it's fixed in the core repo, though not sure why your fiddle is working. For example, this one doesn't work while loading https://www.chartjs.org/dist/master/Chart.min.js.

@rpearce @dutrieux the issue doesn't really come from this plugin but the lack of a method to request a new draw from the Chart.js API. Currently, we call render() when we want to redraw labels. Unfortunately, when calling this method without arguments, a default duration is applied using animation.duration.

Explicitly calling this method with 0 doesn't solve the issue either because it will evaluate pending animations (e.g. tooltip) immediately, thus remove/break hover animation. The main problem is that currently, there is no way to animate things independently. That's something we need to enhance for v3.

[etimberg]

That's really weird! The version I used was built against the latest master locally. We perhaps need the concept of layers that we can animate independently. Then the data labels plugin can redraw its layer as needed

[simonbrunel]

We may want to create separate animation requests for each (animated) property, instead of a global animation that automatically interpolate all element properties base on a single easing value. And instead of global animation (or hover animation) options, we would define per property animation (or group of properties).

So for example, we could animate the background color of a point faster than its border color. Or one point position faster than another (using scriptable options). The animation framework would then be totally independent of the animated target, which is not the case currently.

[rpearce]

Thanks for explaining all of this

[nagix]

Could we pass {lazy: true} to render option like eventHandler in Chart.js? This is for user interactions, so it might be a good idea to so do to enable more responsive interactions.

[simonbrunel]

@nagix good point, I wouldn't have thought that lazy could fix that issue. Still testing a few more interaction cases and will submit a fix if that doesn't break anything else.

[simonbrunel]

It seems to fix the following case:

animation.duration: 1000 && hover.animationDuration: 0

but the other way is still broken (no animation at all):

animation.duration: 0 && hover.animationDuration: 1000

The only workaround that seems to work is:

chart.render({duration: 1, lazy: true});

The 1 ms allows to defer the render to the next animation frame (i.e. animating), while lazy allows the event handler to override the current animation with the hover animation duration. If no duration given, it fallback to 0 (no animation) and elements will transition to latest values immediately.

Not sure if the 1ms will not introduce new issues?!

[nagix]

No animarion with animation.duration is the expected behaviour, isn’t it?