Vue-Chartjs onComplete custom labels - prevent blinking

Question

To calculate custom labels for Vue-Chartjs the only solution I could find was via

animation: { onComplete: function () {

The problem that follows is that these labels are blinking on bar hover. I also saw the same behaviour in many other custom label examples/solutiond. Did anyone manage to solve this?

See example here fiddle

Answer 1

The blinking effect is caused because the animation is only triggered when the bars are hovered. You can use the onHover option to trigger whenever the chart canvas is hovered.

Here's an example logic: (uses the plugin chartjs-plugin-datalabels to make it easier)

options : {
 onHover : function (e) {
    const display = e.type === 'mouseout' ? false : true
    const labels = this.chart.options.plugins.datalabels
    if (display&&labels.display) return //avoid updating if already set
    labels.display = display
    this.chart.update();
 }
}

working example