Conditional Label Rotation in Graph

[Pradeep]

I want the labels on the x-axis to appear like this
https://www.dropbox.com/s/0pc4fk1m4nvb8ll/question_2_1_label_rotation.jpg

instead of like this
https://www.dropbox.com/s/8ydsuw85d9gyaa8/question_2_2_label_rotation.jpg


But I only want it to happen, if the text on the x-axis points
are long, and overlap with the adjacent points. Is it possible to
detect this overlap behavior as shown below?
https://www.dropbox.com/s/9oc1a4kyknutfsj/question_3_2_label_rotation.jpg

[Pradeep]

Ok so I've determined whether the labels in the X-Axis collide with each other or not, using javascript. But I can only determine this after the graph renders, so How do I change the label rotation after the graph is drawn ?

[Vijayabharathi K]

Hi Pradeep,

 

Thanks for using Syncfusion products.

 

The both “question_2_1_label_rotation.jpg” and “question_2_2_label_rotation.jpg” images are same which was updated by you in initial update and we can rotate the X-Axis label by “labelRotation” property of axis. Currently, we don’t have automatic(based on intersecting labels) label rotation support for axis. Please find the below code snippet for label rotation,

 

[JS]

 

primaryXAxis:

{

labelRotation: 90

}

 

Also, please find the online sample link to rotate the X-Axis labels.

 

http://js.syncfusion.com/demos/beta/#!/flat/chart/Column Chart

 

Please let us know if you need further assistance.

 

Regards,

Vijayabharathi

[Vijayabharathi K]

Hi Pradeep,

 

Thanks for the update.

 

Query) How do I change the label rotation after the graph is drawn ?

 

  You can change the “labelRotation” property value by chart model after the chart is drawn. Please refer the below code snippet and attached sample for this,

 

[JS]

 

    $('#container').ejChart('option', { 'primaryXAxis': {labelRotation:90}  });

 

Please let us know if you need further assistance.

 

Regards,

Vijayabharathi

LabelRotateSample_e003cabf.zip

[Pradeep]

Thanks, That worked. So once I detect the label's overlap.
I rotate the labels by 90 and the graph renders like this
https://www.dropbox.com/s/j6p1gqg8u8bvj4w/question_5_2_label_rotation.jpg

As this was occupying too much space on the graph, I thought, I'll rotate it by 45
or by -45, and I get the following graph
https://www.dropbox.com/s/esosmcq8hyuqd4d/question_5_1_label_rotation.jpg

As you can see, the x-axis labels are not aligned with their corresponding points. at these angles. Is there a way to fix this?. ( the labels are rotated at their center, instead of their corners )

[Vijayabharathi K]

Hi Pradeep,

 

Thanks for the update.

 

We are rotating the axis label in centre position of text. But, the font size pixel is difference for the label alignment with points. Could you please confirm your reported issue for label rotation in the attached image?

 

Regards,

Vijayabharathi

 

Image_e735a895.zip

[Pradeep]

Ok so the label's allign properly with ticks if the rotation is exactly 90 (or) -90.
https://www.dropbox.com/s/qu94g1h7bz087h6/question_7_1_label_rotation.jpg

The problem only occurs if the labels are rotated by any other angle other
than 90 (or) -90. In this case I've tried rotating by -45 and 45.
https://www.dropbox.com/s/ynio180hlvk49d4/question_7_2_label_rotation.jpg

[Vijayabharathi K]

Hi Pradeep,

Thanks for the update.

Currently, we are rotating the axis label from centre position of text. So, the rotated long text labels are not align exactly with ticks for other angles 90(or) -90 values . But, It can be overcome  by automatic intersecting label feature . It doesn’t available in our current version. It will  provide build-in capabilities to avoid overlap with various techniques as Multiple Row, Wrap, Rotate.  

Please let us know if you need further assistance.

Regards,

Vijayabharathi