customization of x-axis tick lines

[Kalyan Kumar]

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]

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]

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

Attachment: 111_b76fbee4.zip

[Srihari Muthukaruppan]

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. 

 

1. Share your dataSource file

 

2. Try to reproduce the reported scenario in the above sample

 

3. Share the details if you have done any other customization in your sample.

 

Regards,  

Srihari M