Chart.js: On bar hover / click, the labels disappear

[sasos90]

Hi guys!

In example below, I have a graph with custom added labels on each of the bars after animation is complete. The thing is that on each hover or click on the graph, it looks like that animation is starting again, even though it is not visible, but the labels disappears for duration of animation and then they're visible again. But it looks like flickering and it bothers me really bad.

Example: https://jsfiddle.net/90kq81yc/

How can I prevent flickering or how can I build these labels the properly?

Thanks in advance!

[owenbraymond]

I am having this issue as well! Any help would be appreciated

[sasos90]

@owenbraymond I just figured out that you can somehow prevent this flickering if you show the labels while animation is in progress instead of on complete. So just try to change from onComplete callback to onProgress and the flickering disappears. But I am not happy with that solution, because the code loops in duration of 1 sec for around 22 times. Lack of performance and so on...

[owenbraymond]

@sasos90 I agree, it's not the most eloquent solution but if it works, it works, I guess :P

[etimberg]

The reason the animation is triggering is because there could be hover styles which need to apply.

To turn off hover try

options: {
  hover: {
    mode: false
  }
}

[etimberg]

Reopening since the suggested solution to disable hover mode doesn't work

[etimberg]

Closing again since the hover issue was opened as #3181

[sht5]

Note, initial animations still work on a chart with these options.
i got this from the following stackoverflow- other solutions didn't work for me...this does
https://stackoverflow.com/questions/41952055/chart-js-how-to-disable-everything-on-hover
UPDATE: newest Chart.js has re-bundled the way hover is 'listened' for:

var myChart = new Chart(canvas, {
options: {
events: []
}
...
})
making the 'events' option an empty list (instead of ['click', 'hover', etc]) makes the chart 'blind'/static because it will be listening for no events.

[CanadianGunn]

Yes! This fixed the issue i've been working on for at least 2 hours today.
Thanks so much!