Chart.js animation: onComplete event triggered when hovering over the chart

Question

Chart.js animation: onComplete event triggered when hovering over the chart

One issue I'm facing is loading an image export of my chart after the animation finishes, using the onComplete callback. The problem arises when hovering over the diagram triggers the onComplete callback, significantly slowing down the page.

Below is my chart code:

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

I reviewed the Chart.js documentation but couldn't find a way to distinguish between the hover-animation and the "build"-animation of the chart. Does anyone have a solution for this challenge?

javascript events chart.js

Answer 1

Answer №1

Swap out your animation choice/object with the code snippet below:

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

To clarify, you should deactivate the onComplete function by setting the

chart.options.animation.onComplete

property to null. This will ensure that the onComplete function is only executed once the chart is initially rendered, preventing it from running when hovering over the chart.

_{HINT : avoid using arrow functions for method inside object. (this will point to the window object)}

Answer 2

Swap out your animation choice/object with the code snippet below:

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

To clarify, you should deactivate the onComplete function by setting the

chart.options.animation.onComplete

property to null. This will ensure that the onComplete function is only executed once the chart is initially rendered, preventing it from running when hovering over the chart.

_{HINT : avoid using arrow functions for method inside object. (this will point to the window object)}

Answer 3

Answer №2

Don't forget to include the function keyword oncomplete in your code:

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();
                }
            }
        }
    });

Answer 4

Don't forget to include the function keyword oncomplete in your code:

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();
                }
            }
        }
    });

Answer 5

Answer №3

I am encountering a similar problem, but I approached it in a different manner by using the following method (utilizing hover options):

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

Answer 6

I am encountering a similar problem, but I approached it in a different manner by using the following method (utilizing hover options):

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

Answer 7

Answer №4

Currently focusing on version 4.4.3, my knowledge is limited to this iteration and not the earlier ones.

I have observed that the onComplete function is triggered by various events, such as mouseOver (when the mouse moves) and chart resize (when the window is resized).

To specifically filter out only the occurrence of "chart initialized," I experimented with the 'initial' property of the event:

options: {
    animation: {
        onComplete: function(e) {
            if ( Object.hasOwn(e, 'initial') ) {
                if ( data_loading || e.initial ) {
                   data_loading = false;
                   chartReady();
                }
            }
        }
    },

("chartReady()" is a custom external function used for post-load tasks.)

This approach prevents the removal of the onComplete handler.

Update: Despite my initial claim, it became apparent that this method did not provide notifications when loading new datasets. To address this issue, I introduced a variable called data_loading into the external scope, ensuring it is set to true just before any call to chart.update() – but not prior to creating the chart itself. In the case of my scatter chart containing 360 points, the rendering process is swift enough to bypass most event triggers, although there might still be occasional ones when updating while hovering over the chart.

Answer 8

Currently focusing on version 4.4.3, my knowledge is limited to this iteration and not the earlier ones.

I have observed that the onComplete function is triggered by various events, such as mouseOver (when the mouse moves) and chart resize (when the window is resized).

To specifically filter out only the occurrence of "chart initialized," I experimented with the 'initial' property of the event:

options: {
    animation: {
        onComplete: function(e) {
            if ( Object.hasOwn(e, 'initial') ) {
                if ( data_loading || e.initial ) {
                   data_loading = false;
                   chartReady();
                }
            }
        }
    },

("chartReady()" is a custom external function used for post-load tasks.)

This approach prevents the removal of the onComplete handler.

Update: Despite my initial claim, it became apparent that this method did not provide notifications when loading new datasets. To address this issue, I introduced a variable called data_loading into the external scope, ensuring it is set to true just before any call to chart.update() – but not prior to creating the chart itself. In the case of my scatter chart containing 360 points, the rendering process is swift enough to bypass most event triggers, although there might still be occasional ones when updating while hovering over the chart.

Chart.js animation: onComplete event triggered when hovering over the chart

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Issue with Material UI: Style overrides for nested components are not being applied

Calculate the sum of arrays within an array (matrix) by adding the elements

The React application is being continuously accessed by a node.js server and processed within async functions

Checking the submission text field with Javascript is being confirmed

Learn the process of applying distinct CSS classes to various elements within an AJAX response

Struggling to handle multiple name-field POST requests using Node.js on heroku

The default value initialization for React-Native Picker is not functioning correctly

"Adding a .js file to your Google App Engine project: a step-by-step guide

Tips for explaining the structure of a basic Just functor in TypeScript

jQuery Triggered Download Resulting in 'Error: Connection Issue'

why is the sum coming out as an undefined number?

Deleting an item from a JSON object using Angular

Tips for avoiding duplicate elements in ASP.NET during postback

A guide to tracing a button click with a personalized <img> tag in Google Tag Manager

Ways to Display or Conceal an HTML Element in the Document Object Model Using its Position Identifier

Is there a way to display "not found" if the code's output is blank?

Tips for resolving the error "Parsing near 'Unexpected end of JSON input while parsing...' for...'mocha':'^3.2.0','s'":

There seems to be an issue with Bootstrap: the property this._config is

Unable to locate AngularJS controller

When defining a component decorator in Angular 2, mixing tabs and spaces can lead to an unhandled exception