Issue displaying “Today” and month name labels on X-axis in SfCartesianChart (v31.1.23)

[Jayant Mandke]

Hello team,

We are using the SfCartesianChart control from the Syncfusion MAUI library (version 31.1.23).
Our requirement is to display customized X-axis labels based on the current date.

Expected behavior:

• If today is 1 Nov 2025, the chart should show only “Today”.

• If today is 2 Nov 2025, the chart should show both “Nov” and “Today”.

• For subsequent days (e.g., 3 Nov, 4 Nov, …), the chart should continue showing “Nov” and “Today” as labels.

We have implemented this logic, and it generally works as expected.
However, we’re facing an issue during the initial days of the month — for example, on 1st or 2nd November, only the “Today” label is visible, while the month label (“Nov”) gets hidden.
As the month progresses (e.g., from mid-month onward), both “Nov” and “Today” appear correctly.

It seems this issue might be related to label collision or space limitations on the X-axis when the chart renders fewer data points.

Request:
Could you please suggest how we can ensure that both “Nov” and “Today” labels are always visible, even in the initial days of the month?
Are there any relevant properties or workarounds (like LabelPlacement, LabelIntersectAction, or axis padding adjustments) that could help resolve this?

Environment details:

• Syncfusion MAUI version: 31.1.23

• Control: SfCartesianChart

• Platform: .NET MAUI

• Device: [e.g., Android, iOS, Windows, or all]

Expected Output:
The chart should consistently show both the month name (e.g., “Nov”) and “Today” on the X-axis for all days of the month, regardless of spacing.

Thank you in advance for your help and suggestions!

Attachment: SyncFusion_5dd9effc.pdf

[Vallarasu Ravichandran]

Hi Jayant Mandke,

Thank you for reaching out regarding the X-axis label behavior in SfCartesianChart.

To better understand and assist with your scenario, we would like to clarify a few points about your axis label requirements:

1. Is new data added each day?
   This helps us understand how frequently the chart updates and whether the axis needs to dynamically adjust.
2. Do your DateTime values fall at regular intervals (e.g., daily)?
   While the data may be regular, the label requirement (e.g., showing “Today” and “Month”) seems to be irregular and based on specific conditions.
3. In your current implementation, is the X-axis interval set to 1, its month type and the labels not create for expected datetime?
   It tells the chart to show a label every 1 month. But if your data is daily, and you're expecting labels like “Today” and “Nov” to appear together, this setup might not generate labels for specific days.

 

Once we have clarity on these points, we’ll be able to suggest the most suitable approach—whether it involves adjusting axis intervals, customizing label rendering to ensure consistent visibility of “Today” and month labels.

Looking forward to your response!

 

Best regards,

Vallarasu R.

[Jayant Mandke]

Hi Vallarasu,

Thank you for your response and for clarifying the points. Please find my inputs below:

1. Is new data added each day?
   → No, data is not added daily. It usually updates two or three times a month.

2. Do your DateTime values fall at regular intervals (e.g., daily)?
   → Not exactly. The job runs twice a month and sometimes on manual request, so data points may not always be at perfectly regular intervals.

3. Is the X-axis interval set to 1 (month type)?
   → Yes, I have set the interval to 1, so that the X-axis labels appear at equal spacing. Without this, the labels were not equidistant (as seen in the attached image).

The main issue is that during the first few days of the month, only “Today” is visible on the X-axis and the month name label (e.g., “Nov”) gets hidden. After a few days (around mid-month), both “Nov” and “Today” appear correctly.

Could you please suggest how we can ensure both labels remain visible consistently throughout the month?

Best regards,
Jayant Mandke

Attachment: Screenshot_4eab9e5.pdf

[Saravanan Madheswaran]

Hi Jayant Mandke

We’d like to inform you that axis labels in DateTimeAxis are automatically generated based on the axis range and interval. Since it’s a DateTime axis, labels are positioned strictly according to calculated intervals, and not all edge labels (like min/max) are guaranteed to be shown.

To help you customize label rendering, we’ve introduced the OnCreateLabels override method in the chart axis. This allows you to modify or add labels programmatically. For example, you can highlight today’s date with a custom label as shown below:

public class DatetimeAxisEXT : DateTimeAxis

 {

     protected override void OnCreateLabels()

     {

         base.OnCreateLabels(); //Don’t forgot to call base, for generated visible labels.

 

         if (VisibleLabels.Count > 0)

         {

             // Use only the date part to ignore hours/minutes/seconds

             var today = DateTime.Today;

             var _position = today.ToOADate();

             var date = today.Date;

             // Find the visible label whose position corresponds to today's date

             var todayLabel = VisibleLabels.FirstOrDefault(l =>

                 DateTime.FromOADate(l.Position) == today.Date);

 

             var labelstyle = new ChartAxisLabelStyle() { FontAttributes = FontAttributes.Bold };

             if (todayLabel != null)

             {

                 todayLabel.Content = "Today";

                 todayLabel.LabelStyle = labelstyle;

             }

             else

             {

                 var label = new ChartAxisLabel(_position, "Today");

                 label.LabelStyle = labelstyle;

                 VisibleLabels.Add(label);

             }

         }

     }

 }

Xaml:

<chart:SfCartesianChart.XAxes>

    <local:DatetimeAxisEXT IntervalType="Months" ShowMajorGridLines="False" EdgeLabelsDrawingMode="Fit" EdgeLabelsVisibilityMode="AlwaysVisible"

                        Interval="1" LabelRotation="-90">

        <local:DatetimeAxisEXT.LabelStyle>

            <chart:ChartAxisLabelStyle LabelFormat="MMM"/>

        </local:DatetimeAxisEXT.LabelStyle>

    </local:DatetimeAxisEXT>

</chart:SfCartesianChart.XAxes>

Please note: due to internal layout constraints, only 3 labels can be placed within 100 pixels. If labels are positioned too closely, some may be hidden automatically to avoid overlap.

We hope this helps you achieve your requirement. Let us know if you need assistance adapting this to your specific chart setup.