Delayed Animation

[Jeffrey Phillips]

(Dang, I ask a lot of questions… )

I really like the delayed animation effect that Torstein demos here. Is there a way to use this with Cloud?

Just adding

Code: Select all

(function (H) {
    function deferRender (proceed) {
        var series = this, 
            $renderTo = $(this.chart.container.parentNode);

        // It is appeared, render it
        if ($renderTo.is(':appeared') || !series.options.animation) {
            proceed.call(series);
            
        // It is not appeared, halt renering until appear
        } else  {
            $renderTo.appear(); // Initialize appear plugin
            $renderTo.on('appear', function () {
                proceed.call(series);
            });
        }
    };
    
    H.wrap(H.Series.prototype, 'render', deferRender);
    

to the Custom Code doesn't seem to be it.

[pawel_d]

Hi Jeffrey,

Not a problem. Always feel free to ask. As for the problem, you need to do couple of things in order to delay series animation. First of all, set series animation to true. Secondly, add required code of appear.js jQuery plugin (see External Resources tab in Torstein's example). Finally, add a <p> tag with bunch of lines to cover the chart. Here is the whole code which you can use in 'Custom code' section:

Code: Select all

/*
 * jQuery appear plugin
 *
 * Copyright (c) 2012 Andrey Sidorov
 * licensed under MIT license.
 *
 * https://github.com/morr/jquery.appear/
 *
 * Version: 0.3.6
 */
(function($) {
  var selectors = [];

  var check_binded = false;
  var check_lock = false;
  var defaults = {
    interval: 250,
    force_process: false
  };
  var $window = $(window);

  var $prior_appeared = [];

  function appeared(selector) {
    return $(selector).filter(function() {
      return $(this).is(':appeared');
    });
  }

  function process() {
    check_lock = false;
    for (var index = 0, selectorsLength = selectors.length; index < selectorsLength; index++) {
      var $appeared = appeared(selectors[index]);

      $appeared.trigger('appear', [$appeared]);

      if ($prior_appeared[index]) {
        var $disappeared = $prior_appeared[index].not($appeared);
        $disappeared.trigger('disappear', [$disappeared]);
      }
      $prior_appeared[index] = $appeared;
    }
  }

  function add_selector(selector) {
    selectors.push(selector);
    $prior_appeared.push();
  }

  // "appeared" custom filter
  $.expr[':'].appeared = function(element) {
    var $element = $(element);
    if (!$element.is(':visible')) {
      return false;
    }

    var window_left = $window.scrollLeft();
    var window_top = $window.scrollTop();
    var offset = $element.offset();
    var left = offset.left;
    var top = offset.top;

    if (top + $element.height() >= window_top &&
      top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() &&
      left + $element.width() >= window_left &&
      left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) {
      return true;
    } else {
      return false;
    }
  };

  $.fn.extend({
    // watching for element's appearance in browser viewport
    appear: function(options) {
      var opts = $.extend({}, defaults, options || {});
      var selector = this.selector || this;
      if (!check_binded) {
        var on_check = function() {
          if (check_lock) {
            return;
          }
          check_lock = true;

          setTimeout(process, opts.interval);
        };

        $(window).scroll(on_check).resize(on_check);
        check_binded = true;
      }

      if (opts.force_process) {
        setTimeout(process, opts.interval);
      }
      add_selector(selector);
      return $(selector);
    }
  });

  $.extend({
    // force elements's appearance check
    force_appear: function() {
      if (check_binded) {
        process();
        return true;
      }
      return false;
    }
  });
})(function() {
  if (typeof module !== 'undefined') {
    // Node
    return require('jquery');
  } else {
    return jQuery;
  }
}());

/**
 * Highcharts plugin to defer initial series animation until the element has appeared. Requieres
 * jQuery.appear.
 *
 * Updated 2016-01-11
 */
(function(H) {
  H.wrap(H.Series.prototype, 'render', function(proceed) {
    var series = this,
      $renderTo = $(this.chart.container.parentNode);

    // It is appeared, render it
    if ($renderTo.is(':appeared') || !series.options.animation) {
      proceed.call(series);

      // It is not appeared, halt renering until appear
    } else {
      $renderTo.appear(); // Initialize appear plugin
      $renderTo.on('appear', function() {
        proceed.call(series);
      });
    }
  });
}(Highcharts));

$("#container").before("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mollis dui non commodo varius. Phasellus eu purus tincidunt, bibendum neque interdum, egestas leo. Quisque porttitor eros ac enim hendrerit, ut laoreet nulla fermentum. Suspendisse lobortis mi est. Vestibulum volutpat risus eu eleifend aliquet. Proin commodo, sem quis feugiat feugiat, magna odio lacinia metus, in auctor purus nisi sed enim. Fusce aliquam magna in odio viverra accumsan. Praesent gravida porttitor velit vitae aliquam. Suspendisse porta arcu nec velit tincidunt, ac ullamcorper lacus laoreet. Pellentesque vehicula diam ut lorem varius, at vehicula nunc volutpat. Sed sit amet ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mollis dui non commodo varius. Phasellus eu purus tincidunt, bibendum neque interdum, egestas leo. Quisque porttitor eros ac enim hendrerit, ut laoreet nulla fermentum. Suspendisse lobortis mi est. Vestibulum volutpat risus eu eleifend aliquet. Proin commodo, sem quis feugiat feugiat, magna odio lacinia metus, in auctor purus nisi sed enim. Fusce aliquam magna in odio viverra accumsan. Praesent gravida porttitor velit vitae aliquam. Suspendisse porta arcu nec velit tincidunt, ac ullamcorper lacus laoreet. Pellentesque vehicula diam ut lorem varius, at vehicula nunc volutpat. Sed sit amet ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mollis dui non commodo varius. Phasellus eu purus tincidunt, bibendum neque interdum, egestas leo. Quisque porttitor eros ac enim hendrerit, ut laoreet nulla fermentum. Suspendisse lobortis mi est. Vestibulum volutpat risus eu eleifend aliquet. Proin commodo, sem quis feugiat feugiat, magna odio lacinia metus, in auctor purus nisi sed enim. Fusce aliquam magna in odio viverra accumsan. Praesent gravida porttitor velit vitae aliquam. Suspendisse porta arcu nec velit tincidunt, ac ullamcorper lacus laoreet. Pellentesque vehicula diam ut lorem varius, at vehicula nunc volutpat. Sed sit amet ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mollis dui non commodo varius. Phasellus eu purus tincidunt, bibendum neque interdum, egestas leo. Quisque porttitor eros ac enim hendrerit, ut laoreet nulla fermentum. Suspendisse lobortis mi est. Vestibulum volutpat risus eu eleifend aliquet. Proin commodo, sem quis feugiat feugiat, magna odio lacinia metus, in auctor purus nisi sed enim. Fusce aliquam magna in odio viverra accumsan. Praesent gravida porttitor velit vitae aliquam. Suspendisse porta arcu nec velit tincidunt, ac ullamcorper lacus laoreet. Pellentesque vehicula diam ut lorem varius, at vehicula nunc volutpat. Sed sit amet ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id.</p>");

Highcharts.extend(options, Highcharts.merge(options, {
  exporting: {
    buttons: {
      contextButton: {
        menuItems: [{
          textKey: 'printChart',
          onclick: function() {
            this.print();
          }
        }, {
          separator: true
        }, {
          textKey: 'downloadPNG',
          onclick: function() {
            this.exportChart();
          }
        }, {
          textKey: 'downloadJPEG',
          onclick: function() {
            this.exportChart({
              type: 'image/jpeg'
            });
          }
        }, {
          textKey: 'downloadPDF',
          onclick: function() {
            this.exportChart({
              type: 'application/pdf'
            });
          }
        }, {
          textKey: 'downloadSVG',
          onclick: function() {
            this.exportChart({
              type: 'image/svg+xml'
            });
          }
        }]
      }
    }
  },
  chart: {
    spacingBottom: 30,
    events: {
      load: function() {
        this.renderer.image('http://webberenergygroup.com/test/images/weg_logo.svg', 5, 383, 95, 12)
          .add();
      }
    }
  },
  series: [{
    animation: true,
    index: 0,
    dataLabels: {
      enabled: true,
      format: '{point.label}'
    },
    name: 'Sulfur Content',
    data: [{
      x: 27.4,
      label: 'Arab Heavy',
      location: 'Saudi Arabia',
      y: 2.8
    }, {
      x: 33,
      label: 'Arab Light',
      location: 'Saudi Arabia',
      y: 1.5
    }, {
      x: 35,
      label: 'Bonny Light',
      location: 'Nigeria',
      y: 0.2
    }, {
      x: 38,
      label: 'Brent',
      location: 'North Sea',
      y: 0.45
    }, {
      x: 31.2,
      label: 'Dubai',
      location: 'United Arab Emirates (UAE)',
      y: 2.2
    }, {
      x: 36,
      label: 'Es Sider',
      location: 'Libya',
      y: 0.4
    }, {
      x: 31,
      label: 'Iran Heavy',
      location: 'Iran',
      y: 1.8
    }, {
      x: 33.5,
      label: 'Iran Light',
      location: 'Iran',
      y: 1.4
    }, {
      x: 31.4,
      label: 'Kuwait',
      location: 'Kuwait',
      y: 2.52
    }, {
      x: 36,
      label: 'Light Sweet Louisiana',
      location: 'United States',
      y: 0.4
    }, {
      x: 28.96,
      label: 'Mars',
      location: 'United States',
      y: 1.82
    }, {
      x: 22,
      label: 'Maya',
      location: 'Mexico',
      y: 3.3
    }, {
      x: 33,
      label: 'Oman',
      location: 'Oman',
      y: 1.14
    }, {
      x: 45,
      label: 'Sahara Blend',
      location: 'Algeria',
      y: 0.1
    }, {
      x: 46,
      label: 'Tapis',
      location: 'Malaysia',
      y: 0.03
    }, {
      x: 31,
      label: 'Urals',
      location: 'Russia',
      y: 1.3
    }, {
      x: 38,
      label: 'West Texas Intermediate',
      location: 'United States',
      y: 0.3
    }, {
      x: 20.3,
      label: 'Western Canadian Select',
      location: 'Canada',
      y: 3.43
    }, {
      x: 8.5,
      label: 'Orinoco Belt Heavy',
      location: 'Venezuela',
      y: 3.8
    }]
  }]
}));

And here is the JSFiddle example as an addition:

Example:
https://jsfiddle.net/d_paul/deqo482s/

Regards.

[Jeffrey Phillips]

Hey, it (mostly) works!

But here's weirdness: The initial animation is delayed on all of my charts on the same page, not just the one with the custom code: http://www.webberenergygroup.com/test/h ... -Copy.html

(The EIA charts are from their site—disregard those.)

And it freaks out my column charts near the bottom of the page.

Compare to http://www.webberenergygroup.com/test/h ... er-02.html

And I don't think you need the <p> tag with the filler text—it seems to work fine with that line commented out in the custom code editor.

Oh, and the animation starts before the entire window is in the viewport. I can live with that if it's not an easy change.

[Jeffrey Phillips]

Actually, it seems weird with a brand new column chart. See http://cloud.highcharts.com/show/aguxezo in the editor window. The columns don't even appear until you mouse over them.

[Jeffrey Phillips]

Oh, and the animation starts before the entire window is in the viewport. I can live with that if it's not an easy change.

I replaced the jQuery.appear with this version, and set the offset to "-300" (- chart height). The animation now begins when the entire chart is in the window. One thing down.

Still not sure why Torstein's column chart works and mine doesn't.

[pawel_d]

Hi Jeffrey,

I am sorry for my late reply. This problem occurs because right now Cloud is using Highcharts v5.0.2. On JSFiddle with the newer version (>5.0.3) everything seems to be working fine (please, look at the example below). I corrected wrap of render function and now everything should work fine.

Code: Select all

/*
 * jQuery appear plugin
 *
 * Copyright (c) 2012 Andrey Sidorov
 * licensed under MIT license.
 *
 * https://github.com/morr/jquery.appear/
 *
 * Version: 0.3.6
 */
(function($) {
  var selectors = [];

  var check_binded = false;
  var check_lock = false;
  var defaults = {
    interval: 250,
    force_process: false
  };
  var $window = $(window);

  var $prior_appeared = [];

  function appeared(selector) {
    return $(selector).filter(function() {
      return $(this).is(':appeared');
    });
  }

  function process() {
    check_lock = false;
    for (var index = 0, selectorsLength = selectors.length; index < selectorsLength; index++) {
      var $appeared = appeared(selectors[index]);

      $appeared.trigger('appear', [$appeared]);

      if ($prior_appeared[index]) {
        var $disappeared = $prior_appeared[index].not($appeared);
        $disappeared.trigger('disappear', [$disappeared]);
      }
      $prior_appeared[index] = $appeared;
    }
  }

  function add_selector(selector) {
    selectors.push(selector);
    $prior_appeared.push();
  }

  // "appeared" custom filter
  $.expr[':'].appeared = function(element) {
    var $element = $(element);
    if (!$element.is(':visible')) {
      return false;
    }

    var window_left = $window.scrollLeft();
    var window_top = $window.scrollTop();
    var offset = $element.offset();
    var left = offset.left;
    var top = offset.top;

    if (top + $element.height() >= window_top &&
      top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() &&
      left + $element.width() >= window_left &&
      left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) {
      return true;
    } else {
      return false;
    }
  };

  $.fn.extend({
    // watching for element's appearance in browser viewport
    appear: function(options) {
      var opts = $.extend({}, defaults, options || {});
      var selector = this.selector || this;
      if (!check_binded) {
        var on_check = function() {
          if (check_lock) {
            return;
          }
          check_lock = true;

          setTimeout(process, opts.interval);
        };

        $(window).scroll(on_check).resize(on_check);
        check_binded = true;
      }

      if (opts.force_process) {
        setTimeout(process, opts.interval);
      }
      add_selector(selector);
      return $(selector);
    }
  });

  $.extend({
    // force elements's appearance check
    force_appear: function() {
      if (check_binded) {
        process();
        return true;
      }
      return false;
    }
  });
})(function() {
  if (typeof module !== 'undefined') {
    // Node
    return require('jquery');
  } else {
    return jQuery;
  }
}());

/**
 * Highcharts plugin to defer initial series animation until the element has appeared. Requieres
 * jQuery.appear.
 *
 * Updated 2016-01-11
 */
(function(H) {
  H.wrap(H.Series.prototype, 'render', function(proceed) {
    var series = this,
      $renderTo = $(this.chart.container.parentNode);

    if (!H.defined(series.ok)) {
      series.ok = true;
    }

    // It is appeared, render it
    if ($renderTo.is(':appeared') || !series.options.animation) {
      proceed.call(series);

      // It is not appeared, halt renering until appear
    } else {
      $renderTo.appear(); // Initialize appear plugin
      $renderTo.on('appear', function() {
        if (series.ok) {
          proceed.call(series);
          series.ok = false;
        }
      });
    }
  });
}(Highcharts));

$("#container").before("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mollis dui non commodo varius. Phasellus eu purus tincidunt, bibendum neque interdum, egestas leo. Quisque porttitor eros ac enim hendrerit, ut laoreet nulla fermentum. Suspendisse lobortis mi est. Vestibulum volutpat risus eu eleifend aliquet. Proin commodo, sem quis feugiat feugiat, magna odio lacinia metus, in auctor purus nisi sed enim. Fusce aliquam magna in odio viverra accumsan. Praesent gravida porttitor velit vitae aliquam. Suspendisse porta arcu nec velit tincidunt, ac ullamcorper lacus laoreet. Pellentesque vehicula diam ut lorem varius, at vehicula nunc volutpat. Sed sit amet ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mollis dui non commodo varius. Phasellus eu purus tincidunt, bibendum neque interdum, egestas leo. Quisque porttitor eros ac enim hendrerit, ut laoreet nulla fermentum. Suspendisse lobortis mi est. Vestibulum volutpat risus eu eleifend aliquet. Proin commodo, sem quis feugiat feugiat, magna odio lacinia metus, in auctor purus nisi sed enim. Fusce aliquam magna in odio viverra accumsan. Praesent gravida porttitor velit vitae aliquam. Suspendisse porta arcu nec velit tincidunt, ac ullamcorper lacus laoreet. Pellentesque vehicula diam ut lorem varius, at vehicula nunc volutpat. Sed sit amet ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mollis dui non commodo varius. Phasellus eu purus tincidunt, bibendum neque interdum, egestas leo. Quisque porttitor eros ac enim hendrerit, ut laoreet nulla fermentum. Suspendisse lobortis mi est. Vestibulum volutpat risus eu eleifend aliquet. Proin commodo, sem quis feugiat feugiat, magna odio lacinia metus, in auctor purus nisi sed enim. Fusce aliquam magna in odio viverra accumsan. Praesent gravida porttitor velit vitae aliquam. Suspendisse porta arcu nec velit tincidunt, ac ullamcorper lacus laoreet. Pellentesque vehicula diam ut lorem varius, at vehicula nunc volutpat. Sed sit amet ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mollis dui non commodo varius. Phasellus eu purus tincidunt, bibendum neque interdum, egestas leo. Quisque porttitor eros ac enim hendrerit, ut laoreet nulla fermentum. Suspendisse lobortis mi est. Vestibulum volutpat risus eu eleifend aliquet. Proin commodo, sem quis feugiat feugiat, magna odio lacinia metus, in auctor purus nisi sed enim. Fusce aliquam magna in odio viverra accumsan. Praesent gravida porttitor velit vitae aliquam. Suspendisse porta arcu nec velit tincidunt, ac ullamcorper lacus laoreet. Pellentesque vehicula diam ut lorem varius, at vehicula nunc volutpat. Sed sit amet ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id.</p>");

Highcharts.extend(options, Highcharts.merge(options, {
  plotOptions: {
    series: {
      animation: true
    }
  }
}));

Example:
https://jsfiddle.net/3r6e40hm/ - newest version
https://jsfiddle.net/mdr4rtow/ - version with corrected wrap

Regards.