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

Subscribe to this post

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

Reply | Reply with quote

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

@Html.EJS().Chart("container")

// other chart customization

.Load("load").Render()

</div>

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

Reply | Reply with quote

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?

Reply | Reply with quote

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.

Reply | Reply with quote

Axs label rendering

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US