Column Chart - Align center xAxis Label

Question

Hi. I just created another thread asking about aligning to the left the label for the x Axis in a bar chart. In this case I need to align center the label for the x Axis in a column chart. It's seems that adding a line break with
ruins the alignment.

Sample project:
https://stackblitz.com/edit/angularchartannotation-wqfi5h

Kind regards,

Gabriel

Srihari Muthukaruppan · Accepted Answer

Hi Gabriel, 
  
We are glad to announce that our Essential Studio 2021 Volume 1 Main release v19.1.0.54 is rolled out and is available for download under the following link. 
  
https://www.syncfusion.com/forums/164043/essential-studio-2021-volume-1-release-v19-1-0-54-is-available-for-download 
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
  
Regards,            
Srihari M

Srihari Muthukaruppan · Answer

Hi Gabriel, 
 
We have analyzed your query and regret to let you know that we are able to reproduce this reported issue in your mentioned version. Therefore, we confirm this as a bug and logged a defect report. You can keep track of the bug from the feedback portal below.
  
Feedback Link: https://www.syncfusion.com/feedback/16938/line-break-affects-the-text-alignment-in-the-chart
  
The fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on or before August 18th, 2020. 
  
If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.  
  
  
Thanks,  
Srihari.

Srihari Muthukaruppan · Answer

Hi Gabriel,  
 
Sorry for the inconvenience.  
   
Due to some technical difficulties, we couldn't include this in our weekly patch release. We will include the fix in our weekly patch release which is expected to be rolled out on or before August 25, 2020. We appreciate your patience until then.  
   
Regards,  
Srihari M

Gabriel Alva · Answer

Hi SrihariThank you for the update. It's ok, well wait for the patch.Regards,Gabriel

Srihari Muthukaruppan · Answer

Hi Gabriel,   
  
Most welcome. We will let you know once the issue got published online. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.  
 
Thanks,   
Srihari M

Srihari Muthukaruppan · Answer

Hi Gabriel, 
 
Sorry for the inconvenience.  
 
Due to some technical difficulties, we couldn't include this in our patch release. Hence we will provide custom patch by Thursday (27 August 2020). And this fix will be included in our weekly patch release which is scheduled to be rolled out on or before 1 September 2020. We appreciate your patience until then. 
 
Regards, 
Srihari M

Srihari Muthukaruppan · Answer

Hi Gabriel, 
 
As promised, we have fixed the reported scenario. Unfortunately we couldn’t include the fix in the last patch release. Hence we suggest you to use the below custom package with the latest version for the reported scenario. In which we have created lineBreakAlignment API for line break label alignment. So, we can give left, right and center alignment to that label. The default value of this API is set as "Left". We have also prepared a sample for your reference. Please find below custom package, sample and code snippet. 
 
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/lineBreak-709978804.zip 
 
Custom Package:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-angular-charts_(2)586755475.zip 
 
Code snippet: 




public primaryXAxis: object = { 
    majorGridLines: { width: 0 }, 
    lineStyle: { width: 0 }, 
    majorTickLines: { width: 0 }, 
    valueType: 'Category', 
    labelStyle: { 
      size: '15px', 
    }, 
    lineBreakAlignment: 'Center' 
  }; 

 
Kindly replace this above chart package in your sample  and let us know if still, you have faced any problems. This fix will be included in our weekly patch release which is scheduled to be rolled out on or before 1 September 2020. We appreciate your patience until then.  
 
Regards,   
Srihari M

Srihari Muthukaruppan · Answer

Hi Gabriel,   
  
Sorry for the inconvenience.   
    
Due to some technical difficulties, we couldn't include this in our weekly patch release. We will include the fix in our weekly patch release which is expected to be rolled out on or before September 8, 2020. We appreciate your patience until then.   
    
Regards,   
Srihari M

Srihari Muthukaruppan · Answer

Hi Gabriel, 
 
Sorry for the continuous delay. 
 
We are working on the changes of the behaviour of line break. Hence as of now we suggest you to use the provided custom package to overcome the reported scenario. We will include this fix in our upcoming weekly patch release which is scheduled to be rolled out on or before September 22nd , 2020. We appreciate your patience until then. 
 
Regards, 
Srihari M

Srihari Muthukaruppan · Answer

Hi Gabriel,  
  
Sorry for the inconvenience.  
  
As stated earlier as of now we suggest you to use the provided custom package to overcome the reported scenario. We will include this fix in our weekly patch release which is scheduled to be rolled out on or before October 7, 2020. We appreciate your patience until then.  
  
Regards,  
Srihari M

Srihari Muthukaruppan · Answer

Hi Gabriel,   
   
Sorry for the inconvenience.   
   
Due to some technical difficulties this is not included in this patch release. As stated earlier as of now we suggest you to use the provided custom package to overcome the reported scenario. We will include this fix in our weekly patch release which is scheduled to be rolled out on or before October 13, 2020. We appreciate your patience until then.   
   
Regards,   
Srihari M

Srihari Muthukaruppan · Answer

Hi Gabriel,   
   
Sorry for the inconvenience.   
    
Due to some technical difficulties, we couldn't include this in our weekly patch release . We will include the fix in our volume 3 sp1 release which is expected to be rolled out by the start of November 2020. We appreciate your patience until then.   
    
Regards,   
Srihari

Srihari Muthukaruppan · Answer

Hi Gabriel, 
 
Sorry for the inconvenience. 
 
Due to complexity in implementation, we are unable to include this fix in this patch release. So we will consider this issue in our volume 4 release which is expected to be rolled out by the end of December. We appreciate your patience until then.  
   
Regards,  
Srihari

Srihari Muthukaruppan · Answer

Hi Gabriel,  
  
Sorry for the inconvenience.    
     
Due to complexity in implementation, we are unable include this fix in our volume 4 release. We will consider this fix in our volume 1 release which is expected to be rolled out by the end of March 2021. We appreciate your patience until then.    
     
Regards,    
Srihari

David Margetson · Answer

I am trying to add this property to my yAxis but it does not seem to work. I've added break tags then added the property "

LineBreakAlignment: "right"

" within "

this.primaryYAxis"      Anything more I need to do?Version: @syncfusion/ej2-charts": "20.1.52Regards,Dave M

Durga Gopalakrishnan · Answer

Hi David,By default, the line break support is available for category
values and its text position can be customized using lineBreakAlignment
property. Y axis supports only numeric and logarithmic value types. We don’t
have line break support for y axis. Please check with below documentation.UG : https://ej2.syncfusion.com/angular/documentation/chart/axis-labels/#line-break-supportKindly revert us if you have any concerns.Regards,Durga Gopalakrishnan.