Accumulation Chart Issue - Labels Not Rendering at Top & Bottom

[Gabriel Alva]

Hello,

I'm currently working with the accumulation chart module for Angular to create pie charts. However, I've encountered an issue where the labels for my chart aren't rendering as expected; specifically, they're missing when they should appear at the top and bottom of the chart. I suspect there's a collision or overflow avoidance mechanism in play with the component. However, I need these labels to be consistently visible.

While adjusting the start and end angles is a potential solution, it's not feasible for me since the data displayed is dynamic, and I can't make this adjustment for every possibility.

Is there a way to address this issue?

I've set up a StackBlitz to demonstrate the problem. Please note that the height for the containers is fixed and can't be changed.
https://stackblitz.com/edit/angular-syncfusion-pie-chart-ajdxce?file=app.component.html

Best regards,
Gabriel

[Gabriel Alva]

Hi

Is there any updates with this issues?

Regards,
Gabriel

[Nishanthi Panner Selvam]

Gabriel,

Greetings from Syncfusion.

We have analyzed your shared sample, due insufficient chart height , dataLabel is not rendered. In this case we suggest you to reduce the connector Length to meet your requirement.

We have attached code-snippet, sample and screenshot for your reference.

Code-snippet:

public dataLabel2: Object = {

        connectorStyle: { length: '2' }

};

Screenshot:

Sample: https://stackblitz.com/edit/angular-syncfusion-pie-chart-9tawqw?file=app.component.html,app.component.ts,chart-data.service.ts

Kindly revert us if you have any concerns.

Regards,

Nishanthi