Book Image

Highcharts Essentials

By : Bilal Shahid
Book Image

Highcharts Essentials

By: Bilal Shahid

Overview of this book

Table of Contents (16 chapters)
Highcharts Essentials
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Using jQuery UI easing for series animation


Animations occurring at the point of initialization of charts can be disabled or customized. The customization requires modifying two properties: animation.duration and animation.easing. The duration property accepts the number of milliseconds for the duration of the animation. The easing property can have various values depending on the framework currently being used. For a standalone jQuery framework, the values can be either linear or swing. Using the jQuery UI framework adds a couple of more options for the easing property to choose from.

In order to follow this example, you must include the jQuery UI framework to the page. You can also grab the standalone easing plugin from http://gsgd.co.uk/sandbox/jquery/easing/ and include it inside your <head> tag.

We can now modify the series to have a modified animation:

plotOptions: {
  ...
  series: {
    animation: {
      duration: 1000,
      easing: 'easeOutBounce'
    }
  }
}

The preceding code...