Data label cut off in axis

[hasan-enosis]

We have tried to generate an Area graph with data label. But we see that, data label is cut off in axis. We have attached a link to produce this issue.

Please let us know how to render the data label inside the area.

[Bhuvanesh-V]

Hi Hasan,

Greetings from Syncfusion.

We have analyzed your query. We suggest you to use chart loaded event to change the last data label position to render the data label inside the chart area. We have created a sample using a loaded event. Please check with the below snippet and sample.

Code snippet:

public loaded(args: ILoadedEventArgs): void {
           let textGroup = document.getElementById('chart-container').querySelectorAll('[id*="TextGroup"]');
            var textElement: any = textGroup[i].childNodes[j];
            if (textElement && j == textGroup[i].childNodes.length - 1) 
            {
              textElement.setAttribute('x', parseFloat(textElement.getAttribute('x')) - textElement.getBoundingClientRect().width / 2);
             }
 }

Screenshot:

Sample: https://stackblitz.com/edit/angular-syncfusion-pie-chart-wffupd

Kindly revert us if you have any concerns.

Regards, Bhuvanesh V.