Highcharts - animations other than standard

Question

Is there an option in Highcharts JS ( highcharts.com ) to change the animation when loading a chart? Right now, in the column chart, the columns are sliding down. Is it possible to change the default animation, say, to a rebound?

Answer 1

Download animations can be controlled using the download option. It defines a CSS object that you can use for the theme. You can animate the display of the download using the animated image as the background. http://highcharts.com/ref/#loading

Change the text displayed using the parameter lang property. See http://highcharts.com/ref/#lang for details. Usually I just set it to empty.

var options = { style: { background: 'url(/images/3044/chart_curve.png) no-repeat center' }, lang: { loading: '' } }; var chart = new Highcharts.Chart(options); 

Plus, to display the CSS object, you need to call chart.showLoading ();

Answer 2

Of course, animation and easing options are added to your chart parameters. For example, to bounce:

 var chart = new Highcharts.Chart({ chart: { renderTo: 'container', animation: { duration: 1500, easing: 'easeOutBounce' } }, ... }); 

An example is here http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/

Answer 3

It has been moved below the "series" istead chart object.

http://api.highcharts.com/highstock#plotOptions.series

Something like that:

  series: [{ animation:{ duration: 10000 }, type: 'pie', name: 'Percentuale per periodo', data: [ ['2 anni', 13.0], ['3 anni', 41], ['4 anni', 17], ['5 anni', 17], ['7 anni', 4], ['8 anni', 8] ] }] 

Answer 4

I do not see any animation effect from the answer referencing the script:

An example is here http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/

Even trying to raise the value, like here: http://jsfiddle.net/p9EuZ/

  chart: { animation: { duration: 6222500, easing: 'easeOutBounce' } }