Issue with Long Labels in Column and Line Charts Affecting Layout

Issue with Long Labels in Column and Line Charts Affecting Layout

Posted by: nilesh_nichal on 11 August 2025, 7:24 am EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 August 2025, 7:24 am EST - Updated 11 August 2025, 7:29 am EST

  Hi Team,

  We are encountering an issue with the chart labels

  1. In the column chart, the labels are too long, which disrupts the overall layout and visual balance.
  2. In the line graph, the X-axis labels are also excessively long, affecting the chart’s appearance and readability.

  To maintain a clean and consistent layout, I would like to constrain the label height or apply a more compact rendering approach. Could you please advise on the best way to handle this.
  
  Please give us the sample stack-blitz using Angular framework.

  I’ve attached a screenshot for your reference.

  

  1228×648 63.9 KB

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 12 August 2025, 12:52 am EST

  Hi Nilesh,
  
  You can handle the ‘rendered’ event of the flexchart and wrap the labels as needed. Here’s a sample for your reference demonstrating the same - https://stackblitz.com/edit/angular-ivy-adgbal?file=src%2Fapp%2Fapp.component.ts
  
  You can also refer to the following sample that has a similar approach and shows the labels horizontally, instead of a 45-degree angle, if needed - https://stackblitz.com/edit/angular-ivy-bqfh4phr?file=src%2Fapp%2Fapp.component.ts
  
  Please note that we have inserted the ‘\n’ character between the label text where we need to add a line break, as shown in the above sample. You’ll also need to follow the same approach, and you may also need to make a little adjustment using the ‘plotMargin’ property depending on the label text length.
  
  In case, you face any issues, please let us know.
  
  Regards