Chart disrupting in multiple axes.

[Suvadeep Majumdar]

I am using pivot table with chart support. When I switch from table to chart and then select multiple axes, Chart Axis Labels are oberlapping. What should I do?

[Sivamathi Natarajan]

Hi Suvadeep Majumdar, 

 

Thanks for contacting Syncfusion support. 

 

We have checked the reported problem at our end. We suspect that the reported issue occurs due to the height of the pivot table control is less. So please increase the pivot table height while rendering the pivot chart with multiple axes. Meanwhile, we have prepared a sample for your reference. Please check the below sample. 

 

Sample: https://codesandbox.io/s/vue-template-forked-liz8y?file=/src/components/Sample.vue 

  

If still the problem exists, kindly reproduce the problem in the provided sample and revert us (or) send your sample that replicating the problem. This would be a very helpful for us proceed it further. 

 

Regards, 

Sivamathi. 

[Suvadeep Majumdar]

Thanks, I think I fixed the problem with your solution

. 

[Sivamathi Natarajan]

Hi Suvadeep, 

 

Thanks for the reply. 

 

Regards, 

Sivamathi. 

[Suvadeep Majumdar]

Can I change background of pagination in data grid inside mount.

[Sujith Kumar Rajkumar]

Hi Suvadeep, 

 

Based on the query we could understand that your requirement is to change the background color of the Grid pager in the Vue’s mounted event. You can achieve it by accessing Grid’s pager element using Grid reference and then adding custom CSS class to it for which the required style can be set. 

 

This is demonstrated in the below code snippet, 

 

<template> 

    <div id="app"> 

        <ejs-grid :dataSource="data" :allowPaging="true" ref="grid"></ejs-grid> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

 

export default { 

  data() { 

    return { 

    }; 

  }, 

  mounted() { 

    this.$refs.grid.ej2Instances.pagerModule.element.classList.add("custom-style"); 

  }, 

}; 

</script> 

<style> 

.custom-style { 

  background: lightblue; 

} 

</style> 

 

The above code will allow setting styles for the pager control. If you also need to set styles for the numeric items displayed in the Grid pager, then you can achieve it by applying it to the following CSS class(from the custom class added), 

 

<style> 

.custom-style .e-pagercontainer { 

  background: beige; 

} 

</style> 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://codesandbox.io/s/vue-forked-477in?file=/src/App.vue  

 

You can customize/style the Grid’s appearance(Including Grid’s pager control) by overriding its default CSS classes and setting style to it. The list of CSS classes that needs to be overridden for each area is explained in detail in the below help documentation link which you can refer for more details, 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/how-to/grid-styling/ 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R