animationhighchartsangular-highcharts

HighCharts 3D - Any option to animate the columns one after the other?

I am trying to build highcharts column chart in 3D where all the columns appear at the same time. But our business requirement is that we want each column to appear one at a time with custom animation.

I have tried a hack where I used load event of chart options and inside which I used setInterval of 500ms, but it doesn't seems to work fine for me.

Order in which columns should appear

I am expecting each column to appear one at a time. Once a column has appeared with its animation, then only subsequent columns should make their way.

Solution

  • You can use multiple series, each with only one point and define individual animation options for each of them.

      series: [{
    data: [[0, 1318]],
    animation: {
      defer: 500
    }
  }, {
    data: [[1, 1073]],
    animation: {
      defer: 1000
    }
  }, {
    data: [[2, 1060]],
    animation: {
      defer: 1500
    }
  }, ...]

    Live demo: https://jsfiddle.net/BlackLabel/twzo471b/

    API Reference: https://api.highcharts.com/highcharts/series.column.animation