HighCharts - Donut Chart 3D animation is different than Non-3D Donut chart

Question

I am trying to implement the Stacked Donut Chart in 3D. But the animation seems to be like fade-in. Whereas if I set options3d.enabled = false (means non-3D donut chart) then the animation is like circular in clockwise manner.

I am not able to make 3D chart's animation same as that of non-3D chart.

I saw this code in one of stackblitz :

(function(H) {
  H.wrap(H.seriesTypes.pie.prototype, 'animate', function(proceed, init) {
    var series = this,
      points = series.points,
      startAngleRad = series.startAngleRad;

    if (!init) {
      points.forEach(function(point) {
        var graphic = point.graphic,
          args = point.shapeArgs;

        if (graphic) {
          // start values
          graphic.attr({
            // animate from inner radius (#779)
            r: args.r || (series.center[3] / 2),
            start: startAngleRad,
            end: startAngleRad
          });

          // animate
          graphic.animate({
            r: args.r,
            start: args.start,
            end: args.end
          }, series.options.animation);
        }
      });

      // delete this function to allow it only once
      series.animate = null;
    }
  })
})(Highcharts)

But I need something like this in Angular application.

https://jsfiddle.net/60632rfz/

Answer 1

In Angular, to use a wrap, it's best to put it in a separate file and initialize it in the same way as modules.

Demo: https://stackblitz.com/edit/highcharts-angular-a-custom-plugin-qmcjnz