Datalabels of Chart JS Not Displaying Correct

Question

I am working with simple HTML and chart js, I am putting labels inside the chart with a backgrounds and borders.

However the position of the labels and their background not correct.

these are my Javascript files:

1. Chart.js v4.4.0
2. chartjs-plugin-datalabels v2.2.0

HTML:

<div class="box-row">
<div class="box-cell col-md-7 p-a-1 bg-white" style="min-height:250px">
<canvas id="myChart0" style="max-height: 250px;float: left;"></canvas>
</div>
</div>

App.JS:

const ctx = document.getElementById('myChart0');
var _data = {
        labels: ['المنصرف', 'الوفر', 'الإرتباطات'],
        datasets: [
            {
                label: '',
                data: [monsaref, wafr, RAmountSUM],
                backgroundColor: ['rgb(36 71 126)', 'rgb(0 187 188)', 'rgb(48 133 199)'],
                datalabels: {
                    anchor: 'center'
                }
            }
        ]
    }

new Chart(ctx, {
        type: 'pie',
        data: _data,
        plugins: [ChartDataLabels],
        options: {
            tooltips: {
                enabled: true
            },
            responsive: true,
            plugins: {
                datalabels: {
                    backgroundColor: function (context) {
                        return context.dataset.backgroundColor;
                    },
                    borderColor: 'white',
                    borderRadius: 25,
                    borderWidth: 2,
                    color: 'white',
                    font: {
                        weight: 'bold'
                    },
                    padding: 5,
                    formatter: (value, ctx) => {
                        let sum = ctx.chart.getDatasetMeta(0).total;
                        let percentage = (value * 100 / sum).toFixed(2) + "%";
                        return percentage;
                    },
                },
                
                legend: {
                    position: 'top',
                }
            }
        }
    });

and this is the result:

Do you have any idea what can I do?

Solving the problem of datalabels and their position inside their correct background