Custom Pie Animation in Highcharts: Multiple Animations and Inner Radius Not Working with Data Labels Disabled

I’m using a custom animation for a Highcharts pie chart with two points. One of the points can sometimes be 0, and the other is always 100. However, I’m encountering two issues:

• Multiple Animations: When one point is 0 and the other is 100, the animation runs multiple times for the point with value 100.

• Inner Radius Animation: The inner radius of the pie chart does not animate as expected.

I found this reference: Highcharts Custom Entrance Animation, and adapted the code for my chart. I’ve also set dataLabels to false for the chart. I will always have two points only in the pie chart, if the values are not 100 and 0 in the data the animation is working fine.

I can replicate same issue of animation running multiple in the reference fiddle as well if i set two data objects and set one to 100 and another to 0.

Has anyone encountered similar behavior with pie chart animations? How can I fix the issue with multiple animations and ensure that the inner radius animates correctly?

Here is the code I’m using:

(function (H) {
    H.seriesTypes.pie.prototype.animate = function (init) {
        const series = this,
            chart = series.chart,
            points = series.points,
            { animation } = series.options,
            { startAngleRad } = series;

        function fanAnimate(point, startAngleRad) {
            const graphic = point.graphic,
                args = point.shapeArgs;

            if (graphic && args) {
                graphic
                    // Set initial animation values
                    .attr({
                        start: startAngleRad,
                        end: startAngleRad,
                        opacity: 1
                    })
                    // Animate to the final position
                    .animate({
                        start: args.start,
                        end: args.end
                    }, {
                        duration: animation.duration / points.length
                    }, function () {
                        // On complete, start animating the next point
                        if (points[point.index + 1]) {
                            fanAnimate(points[point.index + 1], args.end);
                        }
                        // On the last point, fade in the data labels
                        if (point.index === series.points.length - 1) {
                            series.dataLabelsGroup.animate({
                                opacity: 1
                            }, {
                                duration: 200 // Set duration for data label fade-in
                            });
                        }
                    });
            }
        }

        if (init) {
            // Hide points on init
            points.forEach(point => {
                point.graphic.attr({
                    opacity: 0
                });
                point.dataLabel.attr({
                    opacity: 0 // Hide data labels initially
                });
            });
        } else {
            fanAnimate(points[0], startAngleRad);
        }
    };
}(Highcharts));