[Chartjs]-Chart.js animation: onComplete event fired on hover

by

7👍

✅

Replace your animation option/object with the following :

animation: {
   onComplete(e) => {
      this.options.animation.onComplete = null; //disable after first render
      console.log(e);
      this.initExport();
   }
}

Basically, you need to disable onComplete function by setting the chart.options.animation.onComplete property to null. This will make the onComplete function run only after the chart is rendered for the first time, and prevent it from firing when the chart gets hovered on.

TIP : do not use arrow function for object­‘s method. (this will always refer to the window object)

2👍

Try this. seems you missed function keyword oncomplete:

this.chart = new Chart(this.$chart.getContext("2d"), {
        type: 'doughnut',
        data: data,
        options: {
            tooltips: {
                enabled: false
            },
            animation: {
                onComplete: function(e) {
                    console.log(e);
                    this.initExport();
                }
            }
        }
    });

0👍

I have the same issue, but solve in a different way (put options: hover: onHover).
Example:

var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: labels,
        ..... (other attributes)
    },
    options: {
        onClick: handleClick,
        animation: {
           onComplete: function () { 
                     .... (things the onComplete do) 
           }
        },
        hover: {
            onHover:function(event, chart) {
                if (chart.length > 0)
                    event.target.style.cursor = 'pointer';
                }   
            },
        }
    });

Leave a comment