customization of x-axis tick lines

Question

In charts x-axis tick line below the bar, i'm sharing sample image go through that. is it possible Attachment: oie_7Y7LGGa1wNPJ_cc16c28.zip

Srihari Muthukaruppan · Accepted Answer

Hi Kalyan,  
  
We have analysed your query. From that, we would like to let you know that we can customize the tick position by using tickPosition property. And also you can customize the width, height and color of the ticklines by using the majorTickLines and minorTickLines property in the axis of the chart as stated earlier. We have prepared a sample for your reference. Please find the below code snippet and screenshot.  
   
Sample: https://stackblitz.com/edit/angular-ekzwzj-jqf1ei?file=app.component.ts 
  
Code Snippet:  




App.component.ts:  
// add your additional code snippet here  
public primaryXAxis: Object = {  
        labelPlacement: 'OnTicks',  
        edgeLabelPlacement: 'Hide',  
        valueType: 'Category',  
        enableTrim: false,  
        tickPosition: 'Inside', 
        majorTickLines: { height: 10, width: 1, color: ‘red’},  
    };   
// add your additional code snippet here  
   
Screenshot:  
  
  
Since we are not aware of your exact requirement. So Please share the following information which will be more helpful for further analysis and provide you the solution sooner. 
 

Share your dataSource file
 

Try to reproduce the reported scenario in the above sample
 

Share the details if you have done any other customization in your sample.
 
Regards,  Srihari M

Srihari Muthukaruppan · Answer

Hi Kalyan, 
 
We have analysed your query. From that, we would like to let you know that we can achieve your requirement by using the majorTickLines and minorTickLines property in the axis of the chart. We have prepared a sample and also attached our UG link for your reference. Please find the below code snippet and screenshot. 
  
Sample: https://stackblitz.com/edit/angular-ekzwzj-e9xy3d?file=app.component.ts  
 
UG Link: https://ej2.syncfusion.com/angular/documentation/chart/axis-customization/#tick-lines-customization 
 
Code Snippet: 




App.component.ts: 
// add your additional code snippet here 
public primaryXAxis: Object = { 
        labelPlacement: 'OnTicks', 
        edgeLabelPlacement: 'Hide', 
        valueType: 'Category', 
        enableTrim: false, 
        majorTickLines: { height: 10, width: 1}, 
    };  
// add your additional code snippet here 
  
Screenshot: 
  
 
Let us know if you have any concerns. 
  
Regards, 
Srihari M

Kalyan Kumar · Answer

i tried what u given the snippet code. but it is not viewing as expected,go through the attachment  Attachment: 111_b76fbee4.zip