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

Axs label rendering

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?


3 Replies

KM Kesavan Muthusamy Syncfusion Team 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.  

<div id="container"> 
       // other chart customization 
    function load(args) { 
        args.chart.primaryXAxis.labelIntersectAction = ej.base.Browser.isDevice ? 'Hide' : 'None'; 
        args.chart.primaryYAxis.labelIntersectAction = ej.base.Browser.isDevice ? 'Hide' : 'None'; 

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


JS jsu 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?

DD Dharanidharan Dharmasivam Syncfusion Team 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. 
      //Other configurations 
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. 

Live Chat Icon For mobile
Up arrow icon