Data Label Overlapping

[Deepak Jain]

Plz Check the attach image of chart, we are facing problem , first label is overlapping with second data label in angular chart component

Attachment: SyncChart_457e0892.zip

[Srihari Muthukaruppan]

Hi Deepak, 

 

Sorry for the inconvenience. 

 

We have analysed your query. From that we would like to let you know that the datalabel is working fine. Unfortunately, we are unable to reproduce the reported scenario. We have also attached the sample for your reference. Please find the sample and screenshot below. 

 

Sample: https://stackblitz.com/edit/angular-paje7j-2annov?file=app.component.ts 

 

Screenshot: 

 

 

if you still face this issue - kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.    

    

1. Try to reproduce the reported scenario in the above sample

 

2. Share the details if you have done any other customization in your sample.

 

Regards, 

Srihari M 

[Deepak Jain]

Hello Team,

When we create two charts in the same row, and one is having 3 series and 8 characters in the data label then this case is generated.

Data Label should be at the bottom side of the series.

[Srihari Muthukaruppan]

Hi Deepak,  

  

Sorry for the inconvenience.  

  

We have analysed your query. From that, we would like to let you know that the datalabel is rendering fine with no overlapping issue. We have also tried to reproduce the reported scenario by providing multiple series in the same row. Unfortunately, we are unable to reproduce the reported scenario. We have also attached the sample for your reference. Please find the sample and screenshot below.  

  

Sample: https://stackblitz.com/edit/angular-paje7j-oa7ev4?file=app.component.html 

  

Screenshot:  

   

  

if you still face this issue - kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.     

     

1. Try to reproduce the reported scenario in the above sample
2. Share the details if you have done any other customization in your sample.

  

Regards,  

Srihari M  

[Deepak Jain]

Hello Shrihari,

Thank for your reply. Let me verify my code with your sample provided. If anything required will update you

[Deepak Jain]

Hello SriHari,

Please check above code. Why we need to add margin @line number: 29, to get the desired chart with proper margins.

[Srihari Muthukaruppan]

Hi Deepak,   

    

We have analysed your query. Based on your requirement, we would like to let you know that instead of providing margin property to change the alignment of datalabels in the chart, we suggest you to set the alignment property for the dataLabel to customize the placement of dataLabel. And by default, the datalabel position is set as top and alignment is set to Near, so that it will display the datalabel at top of the series, but inside the column. Hence we suggest you to set the alignment as “Far” to achieve your requirement. Please find the sample, code snippet and screenshot below. 

 

Sample: https://stackblitz.com/edit/angular-paje7j-zofqmk?file=app.component.ts 

 

Code Snippet: 

// add your additional code here 

public marker: Object = {  

      dataLabel: {  

          enableRotation: true, angle: -90, visible: true,  

          position: 'Bottom', alignment: 'Far'  

       } 

    }; 

// add your additional code here 

 

Screenshot:    

 

 

Let us know if you need further assistance on this. 

 

Regards,  

Srihari M