Accepted answer

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.

To change the text that it displays via the lang property of options. See 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();


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

Example seen here

Even trying elevated value as here:

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


It was moved under "series" object istead of chart

Something like this:

    series: [{
          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]


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

Related Query

More Query from same tag