[Chartjs]-Vue-Chartjs onComplete custom labels – prevent blinking

by

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

Leave a comment