PrimaryXAxis Label offset/start

[ugunay]

Hi,

Thanks for the great product.

Consider the dataset for the the line chart:

{ x: 1, y: 1014 },

{ x: 1.5, y: 1000 },

{ x: 2, y: 1020 },

{ x: 2.5, y: 1044 },

{ x: 3, y: 1065 },

{ x: 3.5, y: 1054 },

{ x: 4, y: 1110 },

{ x: 4.5, y: 1214 },

{ x: 5, y: 1130 },

{ x: 5.5, y: 1030 },

{ x: 6, y: 1190 },

I want to show the x values between 1.5 and 4.5 but have labels for only 2,3, and 4.

I read all the documentation, tried different ways but could not achieve it.

Is there a way to do it?

Kind regards.

[Durga Gopalakrishnan]

Hi Ugunay, 

Greetings from Syncfusion. 

We request you to specify interval as 0.5 to display decimal numbers and interval as 1 to display whole numbers. You can use minimum and maximum property to start and end at required position. Please check with the below sample. 

 

Sample : https://stackblitz.com/edit/react-gfahdb 

Kindly revert us if you have any concerns. 

Regards, 

Durga G. 

[ugunay]

With the sample, we have 7 labels which are: 1.5, 2, 2.5, 3, 3.5, 4 and 4.5

I want to show the same data with only 3 labels: 2, 3 and 4

Thanks.

[Durga Gopalakrishnan]

Hi Ugunay, 

We request you to use axisLabelRender event to cancel the decimal axis label rendering. We have attached modified sample for your reference. 

onAxisLabelRender(args){ 

        if(args.axis.name == "primaryXAxis"){ 

            args.cancel = args.value % 1 != 0; 

        } 

    } 

 

Sample : https://stackblitz.com/edit/react-gfahdb-gqxbru 

Kindly revert us if you have any concerns. 

Regards, 

Durga G. 

[ugunay]

Thank you!

[Swetha Babu]

Hi Ugunay, 

  

Most Welcome! Please get back to us if you need further assistance. 

  

Regards, 

Swetha