The datalabels in my Donut graph are not aligned to the center of the slice when I use the 3d Option: https://codepen.io/shahimclt/pen/qBPGdgW

chart: {
    type: "pie",
    options3d: { enabled: true, alpha: 35 }
},
plotOptions: {
pie: {
    innerSize: "60%",
    depth: 30,
    states: { inactive: { opacity: 0.8 } },
    dataLabels: {
    enabled: true,
    formatter: function() {
        return `<span class="fod-score-color-fill-${this.point.colorClass}">${this.y}</span>`;
    },
    position: 'center',
    distance: '-30%'
    },
},
},
series: [
{
    name: "No.of Centers",
    data: [{"id":5,"name":"Jameel Class","y":37,"color":{"linearGradient":{"x1":0,"x2":1,"y1":0,"y2":1},"stops":[[0,"#4AC29A"],[1,"#BDFFF3"]]},"colorClass":"cinnamint"},{"id":8,"name":"Decent Class","y":8,"color":{"linearGradient":{"x1":0,"x2":1,"y1":0,"y2":1},"stops":[[0,"#bcc6cc"],[1,"#e6e6e6"]]},"colorClass":"silver"},{"id":26,"name":"Unfit Class","y":4,"color":{"linearGradient":{"x1":0,"x2":1,"y1":0,"y2":1},"stops":[[0,"#ff5e62"],[1,"#ff9966"]]},"colorClass":"orange-coral"},{"id":27,"name":"Jameel Elite","y":41,"color":{"linearGradient":{"x1":0,"x2":1,"y1":0,"y2":1},"stops":[[0,"#4e54c8"],[1,"#8f94fb"]]},"colorClass":"moon-purple"}],
    showInLegend: true,
},
]

But its fine in a normal Donut:

Any idea how to fix this?