Pie chart lablel overlapping

[Lasitha - BLUE LOTUS X]

This is my code to display pie chart. and I added a label template to display percentage. How but the label values are overlapping. how can i fix that? below I attached the image with overlapping issue.

Attachment: Screenshot_20241210_160616_c4dc5016.rar

[Durga Gopalakrishnan]

Hi Lasitha,

Greetings from Syncfusion.

We have ensured the reported scenario with your attached screenshot. Pie chart data label template is rendered properly without any overlap. We have attached the tested sample and screenshot for your reference.

Sample : https://blazorplayground.syncfusion.com/VtVzWhCsfsdwXRlj

If you are still facing problem, please share the following information which will be helpful for further analysis and provide you better solution.

• Try to replicate an issue in above sample.
• Please share your code snippet with full configuration.
• Share an issue replication steps or video.
• Share if you have done any other customization.

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Lasitha - BLUE LOTUS X]

<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>

this is my code. but still got the overlapping issue of the labels. what is the wrong in this code?

[Durga Gopalakrishnan]

Lasitha,

We have reviewed the reported issue using the provided code snippet but were unable to replicate the problem on our end. For your reference, we have attached the tested sample:

Sample : https://blazorplayground.syncfusion.com/VXVytMtApoxSGQuz

To assist you further, we kindly request the following information:

• Please attempt to replicate the issue in the attached sample.
• Share your sample with the full configuration.
• Provide your data source file.

Feel free to reach out if you have any questions or concerns.