.net - Syncfusion Blazor Accumulation Chart (Pie Chart) - Labels Overlapping - Stack Overflow

I'm working with Syncfusion Blazor components to create an Accumulation Chart (Pie Chart) in my .NET MAUI Blazor application. I'm encountering an issue where the data labels are overlapping, especially when I have several segments or segments with small values.

<SfAccumulationChart Width="100%"  EnableSmartLabels="true">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries 
            Radius="90%" 
            DataSource="@departmentSaleList"
            XName="Department" 
            YName="Amount">
                                 
            <AccumulationDataLabelSettings                                    
                Visible="true"                                  
                Position="AccumulationLabelPosition.Outside">
                
                <Template >
                    @{
                        var data = context as AccumulationChartDataPointInfo;
                        
                    }

                    <div class="labal-div">
                      
                        <p class="labal-percentage-text">
                            @data.Percentage %
                        </p>


                    </div>

                   

                </Template>
               
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>

    <AccumulationChartLegendSettings Position="Syncfusion.Blazor.Charts.LegendPosition.Bottom" Visible="true"></AccumulationChartLegendSettings>
    <AccumulationChartTooltipSettings Enable="true" Header="Department" Format="${point.x} : <b>${point.y}</b>">
       
    </AccumulationChartTooltipSettings>
</SfAccumulationChart>

In here percentage values are overlapping. How can I solve this?