javascript - Highcharts event on animation complete? - Stack Overflow

Is there any way to set an event listener on when animation is finished on Highcharts redraw? From what I see, a redraw event fires immediately on change, without waiting for animation. Or maybe there's some other way to wait for when the chart has bee still?

Besides, is it possible to add an event listener to the chart that's already rendered (e.g. via addEventListener, not by JSON configuration)?

Is there any way to set an event listener on when animation is finished on Highcharts redraw? From what I see, a redraw event fires immediately on change, without waiting for animation. Or maybe there's some other way to wait for when the chart has bee still?

Besides, is it possible to add an event listener to the chart that's already rendered (e.g. via addEventListener, not by JSON configuration)?

• javascript
• highcharts
• dom-events

Share Improve this question Follow edited Jan 11, 2021 at 17:19 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 30, 2014 at 9:51 ActineActine 2,91722 gold badges2727 silver badges4040 bronze badges 2

• But in general what is your goal, for which purpose you need to have "funished animation" event? – Sebastian Bochan Commented Apr 30, 2014 at 10:12
• On high level, I am writing Selenium automation for a product where Highcharts are used, and I cannot think of many ways to wait until the chart has rendered and bee still. Because of variety of charts that's not very feasible to poll for some DOM change, however if there's no way to hook up an event listener, I'll have to go that way. – Actine Commented Apr 30, 2014 at 10:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 11

You can catch animation event and set plete function.

plotOptions: {
        series: {
            animation: {
                plete: function () {
                    console.log('a1');
                }
            }
        }
    },

http://jsfiddle/G63h4/

There is another event after animation is finished which is fired just once:

  plotOptions: {
    series: {
      animation: {
        plete: function () {
          console.log('a1 - fired after animation of each element');
        },
        events: {
          afterAnimate: function (ev) {
            console.log('fired only once for each series');
          }
        }
      }
    }
  }

You can use the "plete" callback on the animation argument of chart.redraw.

E.g.:

chart.redraw({
    plete: function(){
      console.log("Animation pleted");
    }
});