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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ejChart X-Axis labels overlap

Thread ID:

Created:

Updated:

Platform:

Replies:

124359 Jun 3,2016 11:31 AM UTC Jun 7,2016 01:12 PM UTC JavaScript 3
loading
Tags: ejChart
Michal Misler
Asked On June 3, 2016 11:31 AM UTC

On the following picture you can see two charts -- the first one is displayed nicely while the other has overlapping labels on x-axis.
Is there any way to prevent from this and force the behaviour like on the first chart (i.e. x-data labels are automatically skipped)?

Thanks a lot
MichalM




Saravana Kumar Kanagavel [Syncfusion]
Replied On June 6, 2016 08:40 AM UTC

Hi Michal,   
   
Thanks for contacting Syncfusion Support.   
  
We have analyzed your query and created a sample based on your requirement. To prevent the X-Axis labels overlapping please use “labelIntersectAction” property.   
   
Following values has to be given for “labelIntersectAction” property   
   
·       rotate90” – To rotate the axis labels in 90 degrees.   
·       rotate45” – To rotate the axis labels in 45 degrees.   
·       multipleRows” – If axis labels are overlapped then overlapped labels can be placed in second row.   
·       hide” – To hide the overlapping axis labels.   
·       trim” – To trim the overlapping axis labels and full text can be displayed by tooltip on hovering.   
·       wrap” – If axis labels are overlapped then overlapped letter only placed in next row.   
   
Please follow the code example below   
[JS]   
$(function ()   
    {   
        $("#container").ejChart(   
        {    
            primaryXAxis:   
            {   
                labelIntersectAction : "multipleRows"                             
            }   
        });   
    });   
  
   
   
   
And we have also made a sample for your reference and attached in the below location   
   
  
   
And please refer the UG link to know more details about label customization.   
   
   
Please find the output of the sample below   
   
     
 
Please let us know if you have concern.   
   
Regards,   
Saravana Kumar K.   


Michal Misler
Replied On June 7, 2016 09:32 AM UTC

Hi,
  thanks a lot. Great help. I appreciate it.

MichalM

Saravana Kumar Kanagavel [Syncfusion]
Replied On June 7, 2016 01:12 PM UTC

Hi Michal, 
 
Thanks for your update. 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Saravana Kumar K. 


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

;