Add new line to long FlexChartAxis labels (React)

Add new line to long FlexChartAxis labels (React)

Posted by: igelfenbeyn on 9 September 2020, 4:58 pm EST

• 

  igelfenbeyn

  • Post Options:
  • Link
    Copy

  Posted 9 September 2020, 4:58 pm EST

  Hi,
  
  i’ve tried but failed to add new line to long texts. Can someone help?

  <wjChart.FlexChartAxis wjProperty=“axisX” labelAngle={-90} itemFormatter={itemFormatter}>
  
  </wjChart.FlexChartAxis>
  
  …

  function itemFormatter(engine: any, label: any) {        
      label.text = label.text.replace(" ", "\n");
  label.text = label.text.replace(" ", "<br />");
      return label;
  }
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 10 September 2020, 4:15 am EST

  Hi Igor,

  The chart labels are created using SVGTextElement which does not support line breaks. You will need to create different tspan elements to create line breaks. For this, you will first need to set the overlappingAngle property to display all the labels and handle the rendered event of the FlexChart to add tspan elements. Please refer to the sample link below for reference:

  https://stackblitz.com/edit/react-6fw5x7

  Regards,
  
  Ashwin