Chart.js: Showing Data values on Bar's

[techie28]

Hello,
Sorry if I am posting this under the wrong section.

My chart JS version: 2.1.3

I am having some Bar charts on the page on the bar of each I want to show the data value.I referred to the solution here http://stackoverflow.com/questions/31631354/how-to-display-data-values-on-chart-js (see potatopeelings & Hung Tran answer)
This work fine but the mouse over on the bars triggers the animation onComplete callback which causes the rewriting of the values on the bars & give a blinking impression.Is there a way to prevent this?

I tried to implement the onAnimationComplete callback as per potatopeelings answer but it seems his solution is for Version: 1.0.2 & I am unable to implement the same for my version.

Would using onAnimationComplete & onComplete callbacks yield same result?I can see that the potatopeelings do not have the blinking problem(http://jsfiddle.net/uh9vw0ao/).
my code is here: http://pastebin.com/tT7yTkGh

P.S: I have tried using afterDraw callback but it also seem to be firing on mouseover of the bars.I am also showing tooltips.

thanks

[etimberg]

@techie28 did you take a look at #327 There are some solutions there that you could start with. The other alternative is to write a plugin to do this. There is an example of a plugin to add doughnut chart labelling in #78

The code that does not have the blinking problem has tooltips turned off, this means that the chart does not need to re-render on mouseover and so no blinking occurs.

[romanovma]

@etimberg, I have tooltip disabled tooltips: { enabled: false } but it still blinking: https://jsbin.com/fiqujaketi/edit?js,output. Any advice?

[simonbrunel]

@techie28 @romanovma can you have a look to the discussion in #3250. I think that a workaround for your cases would be to not animate hovering ({ hover: { animationDuration: 0} }). And I'm pretty sure you can even keep tooltips.

@etimberg, it might be a duplicate of #3169

[romanovma]

@simonbrunel , that works, thanks a lot!

[etimberg]

Closing since #3169 has good discussion on this topic

[techie28]

@simonbrunel thanks that works but it still would trigger the onComplete callback right?

[simonbrunel]

@techie28, yes onComplete is still called. I suggested another way to implement what you need using a plugin, so I would encourage you to read comments on #3250 :)

[ksamikannu]

({ hover: { animationDuration: 0} }) - This worked for me

[mmdileepthomas]

({ hover: { animationDuration: 0} }) - This worked for me also, when i checked the animationDuration : 400 , i changed it to 0; Thanks @simonbrunel