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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Conditional Label Rotation in Graph

Thread ID:

Created:

Updated:

Platform:

Replies:

112450 Sep 24,2013 05:24 AM UTC Oct 4,2013 04:41 AM UTC JavaScript 7
loading
Tags: ejChart
Pradeep
Asked On September 24, 2013 05:24 AM UTC

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
Replied On 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 ?

Vijayabharathi K [Syncfusion]
Replied On 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


Vijayabharathi K [Syncfusion]
Replied On 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

Pradeep
Replied On 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 )


Vijayabharathi K [Syncfusion]
Replied On 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

Pradeep
Replied On 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



Vijayabharathi K [Syncfusion]
Replied On 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

 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;