Highcharts - animations other than the default

Question

Is there an option in Highcharts JS (highcharts.com) to change the animation when a chart loads? Right now, on a column chart, the columns slide up from the bottom. Is it possible to alter the default animation to, say, bounce?

Solution 1

The loading animation can be controlled using the 'loading' option. It defines a CSS object that you can theme. You can animated the loading display by using an animated image as the background. http://highcharts.com/ref/#loading

To change the text that it displays via the lang property of options. See http://highcharts.com/ref/#lang for more. I usually just set it to blank.

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

Solution 2

Sure, to your chart options add the animation duration and easing options. For example, to bounce:

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

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

Solution 3

It was moved under "series" object istead of chart

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

Something like this:

    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]
        ]
    }]

Solution 4

I don't see any animation effect from the answer referencing the fiddle:

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

Even trying elevated value as here: http://jsfiddle.net/p9EuZ/

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

View more solutions

Comments

[Drew Alden]

Agreed. This question also specifically asks about the "loading" animation, not the "update" animation.