We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Conditional Label Rotation in Graph

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

7 Replies

PR Pradeep September 26, 2013 04:15 AM UTC

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 ?


VK Vijayabharathi K Syncfusion Team September 26, 2013 04:43 AM UTC

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



VK Vijayabharathi K Syncfusion Team September 26, 2013 06:33 AM UTC

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


PR Pradeep September 26, 2013 07:01 AM UTC

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 )



VK Vijayabharathi K Syncfusion Team September 27, 2013 11:40 AM UTC

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


PR Pradeep October 3, 2013 12:37 AM UTC

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




VK Vijayabharathi K Syncfusion Team October 4, 2013 04:41 AM UTC

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

 


Loader.
Live Chat Icon For mobile
Up arrow icon