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

Axs label rendering

Thread ID:

Created:

Updated:

Platform:

Replies:

142743 Feb 18,2019 05:14 AM UTC Feb 20,2019 08:58 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Chart
jsu
Asked On February 18, 2019 05:14 AM UTC

Hi Team,

I need to hide the X and Y axis labels only in mobile view (or when the browser shrinks and window size becomes lower).

Can you please me help on this?


Thanks

Kesavan Muthusamy [Syncfusion]
Replied On February 18, 2019 11:38 AM UTC

Hi Jsu, 
Thanks for using Syncfusion products. 
We have analyzed your query. As of now we don’t have options hide entire axis labels. But  You can set labelIntersectAction to "Hide" for axis in load event by checking whether sample is loaded in mobile not.  It will hide the labels which intersected with adjacent labels. 
Please find the following code snippet.  


Index.cshtml 
<div id="container"> 
   @Html.EJS().Chart("container") 
 
       // other chart customization 
       .Load("load").Render() 
</div> 
<script> 
    function load(args) { 
        args.chart.primaryXAxis.labelIntersectAction = ej.base.Browser.isDevice ? 'Hide' : 'None'; 
        args.chart.primaryYAxis.labelIntersectAction = ej.base.Browser.isDevice ? 'Hide' : 'None'; 
    } 
     
</script> 
 

Please let us know, if you have any concern on this. 

Regards, 
Kesavan 


jsu
Replied On February 19, 2019 05:00 AM UTC

Thanks Keshavan.

Also in mobile view I need to disable the pagination property of legends. 
Could  you please advise how to set pagination property false for the legends?

Dharanidharan Dharmasivam [Syncfusion]
Replied On February 20, 2019 08:58 AM UTC

Hi Jsu,  
 
We have analyzed the enquired requirement. We would like to let you know that, currently there is no option to disable the pagination. When the legend size is increased, then pagination will be visible, this is our default behavior. However, you can specify the size (height/width) to legend based on the device. Find the code snippet below to achieve this requirement. 
 
 
@Html.EJS().Chart("container") 
      //Other configurations 
.Load("load").Render() 
 
function load(args) { 
        args.chart.legendSettings.width = ej.base.Browser.isDevice ? "50%" : "100%"; 
        args.chart.legendSettings.height = ej.base.Browser.isDevice ? "50%" : "100%"; 
    } 
 
 
This can be modified based on your scenario. 
 
Thanks, 
Dharani. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon