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.
Unfortunately, activation email could not send to your email. Please try again.

Conditional Label Rotation in Graph

Thread ID:

Created:

Updated:

Platform:

Replies:

112450 Sep 24,2013 01:24 AM Oct 4,2013 12:41 AM JavaScript 7
loading
Tags: ejChart
Pradeep
Asked On September 24, 2013 01:24 AM

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 12:15 AM

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 12:43 AM

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 02:33 AM

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 03:01 AM

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 07:40 AM

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 2, 2013 08:37 PM

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 12:41 AM

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.

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.

;