FlexChart Axis-X values overlapping and not centered when text is long

FlexChart Axis-X values overlapping and not centered when text is long

Posted by: rajesh.samay on 17 October 2024, 5:08 am EST

• 

  rajesh.samay

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 October 2024, 5:08 am EST - Updated 17 October 2024, 5:13 am EST

  Hi Team,
  
  We are using Wijmo Charts and Graphs on our product and found that when the x axis label is given a large string the string does not align to the center of the column and moves right which in some cases causes overlap.
  
  

  

  1341×533 9.85 KB

  
  
  The issue we are facing is shown in the picture above.
  
  Is there any way to break this long text into a different line to avoid it from overlapping with another label or overflowing into the wrong column and also the centering of the label.
  
  We have tried using formatting suggestions from link: https://developer.mescius.com/wijmo/docs/Topics/Chart/Advanced/Axes/Axis-Labels#format-the-axis-labels
  
  but we would prefer if we could split the label into two different lines so no information is lost.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 18 October 2024, 3:13 am EST

  Hi Samay,

  You can insert ‘\n’ character in between the labels text and then handle the rendered event of the FlexChart to modify the labels by splitting them into multiple lines and adjusting the labels position.
  
  You can refer to the following sample demonstrating the same - https://stackblitz.com/edit/angular-ivy-s2nqyj?file=src%2Fapp%2Fapp.component.ts

  Please note that, you may need to modify the event handler to adjust the position of the labels as per your project implementation.

  In case, you face any issues, please let us know.

  Regards

• 

  rajesh.samay

  • Post Options:
  • Link
    Copy

  Posted 14 November 2024, 10:32 am EST - Updated 14 November 2024, 10:37 am EST

  Hi Vivek,
  
  In our code we do not add ’ [labelAngle]=“0”’ to our chart which causes the values to not be formatted right. i have updated the stackblitz link with the issue -https://stackblitz.com/edit/angular-ivy-5zdkqf?file=src%2Fapp%2Fapp.component.html
  
  another issue we are facing is that when there are small texts which do not need to be split the alignment is different as shown in the picture attached
  
  

  

  474×599 14.4 KB

  
  
  We are also facing an issue when changing the size of the screen (Zooming in or out), the long text does not center align when the text can fit and is not at an angle (labelangle=0 dynamically) the split code is not reflecting.
  
  
  
  (this picture is after implementing the split label code)
  
  The label is also still not aligned to fit the grid lines.

  Regards
  
  Samay Rajesh

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 18 November 2024, 8:42 am EST

  Hi Samay,

  You’ll have to adjust the ‘x’ attribute of the labels accordingly, if not setting the lableAngle to 0. Please refer to the following updated sample for the same - https://stackblitz.com/edit/angular-ivy-adgbal?file=src%2Fapp%2Fapp.component.ts

  In the above sample we have also handled the scenario, when a label is not splitted into multiple lines and positioned incorrectly. Also, it seems the zooming in/out also works fine now.

  Please note that, you may still need to make some adjustments as per your project requirements, like you will have to adjust the plotMargin according to the available space in your chart. We have tried to create a generic solution to position the labels, but you may still need to make some minor adjustments in x/y attributes of the labels if needed.

  In case, you face any issues, please let us know.

  Regards