Tick lines centered on every column

Question

Hello, please see attached image representing the graph i want to achieve.

The X-axis is a date time axis and displays the different days within a given month. What I want is to have tick lines centered on every column and labels for every fifth interval. The representation of ticks and labels should be the same wether its 28,30 or 31 days in a month.

I have experimented a bit but I didn't manage to achieve what I wanted. Can you please assist me in obtaining the goal?

Regards,

Martin

Attachment: attachment_1_795461f6.zip

Yuvaraj Gajaraj · Answer

Hi Martin,Greetings from Syncfusion. We suggest you use the axisLabelFormatter
callback to customize the axis label as per your requirement and have interval
1 then tick line get render for every column in the chart. We have attached the
code snippet to achieve your requirement.Code snippet:

primaryXAxis: DateTimeAxis(
    majorGridLines: MajorGridLines(width: 0),
    axisLabelFormatter: (args){
      int day = DateTime.fromMillisecondsSinceEpoch(args.value.toInt()).day;
      if(day % 5 == 0 || day == 1) {
        return ChartAxisLabel(day.toString(), args.textStyle);
   
      }
      else {
        return ChartAxisLabel('', args.textStyle);
      }
    },
    interval: 1
  ),

If you have any further queries, please get back to us.Regards,Yuvaraj.