How to use DateTime values in the Y-Axis in .NET MAUI Cartesian Chart?

This article provides a detailed walkthrough on how to use DateTime values on the Y-Axis in .NET MAUI Cartesian Chart.

Since the Cartesian Chart does not support a DateTimeAxis on the Y-Axis , this guide will show how to use datetime values for plotting and format them for displaying on the NumericalAxis labels.

Step 1: Initialize the SfCartesianChart with Primary and Secondary Axes and populate it with data as follows. For more detailed guidance, refer to the MAUI Cartesian Charts getting started documentation.

XAML

<chart:SfCartesianChart>

   <chart:SfCartesianChart.BindingContext>
       <local:ViewModel />
   </chart:SfCartesianChart.BindingContext>

   <chart:SfCartesianChart.XAxes>
       <chart:CategoryAxis />
   </chart:SfCartesianChart.XAxes>

   <chart:SfCartesianChart.YAxes>
       <chart:NumericalAxis />
   </chart:SfCartesianChart.YAxes>

   <chart:ColumnSeries ItemsSource="{Binding SleepData}"
                       XBindingPath="Day"
                       YBindingPath="DurationInMinutes">
   </chart:ColumnSeries>
   
</chart:SfCartesianChart> 

C#

SfCartesianChart chart = new SfCartesianChart();

chart.BindingContext = new ViewModel();

CategoryAxis xAxis = new CategoryAxis();
chart.XAxes.Add(xAxis);

NumericalAxis yAxis = new NumericalAxis();
chart.YAxes.Add(yAxis);

ColumnSeries columnSeries = new ColumnSeries
{
   ItemsSource = (new ViewModel()).SleepData,
   XBindingPath = "Day",
   YBindingPath = "DurationInMinutes"
};

chart.Series.Add(columnSeries);

this.Content = chart; 

Step 2: Define the DataModel and convert the DateTime values into total minutes and store it in a separate property for using them in the numerical Y-Axis.

C#

public class DataModel
{
   public string Day { get; set; }

   public DateTime Duration { get; set; }

   public double DurationInMinutes => Duration.Hour * 60 + Duration.Minute;
} 

Step 3: Declare an event handler for the LabelCreated event of the numerical Y-Axis.

XAML

<chart:SfCartesianChart>
. . .
   <chart:SfCartesianChart.YAxes>
       <chart:NumericalAxis LabelCreated="NumericalAxis_LabelCreated" />
   </chart:SfCartesianChart.YAxes>
. . .    
</chart:SfCartesianChart> 

C#

NumericalAxis yAxis = new NumericalAxis();
yAxis.LabelCreated += NumericalAxis_LabelCreated; 

Step 4: Handle duration values and format the labels of the NumericalAxis within the LabelCreated event.

C#

private void NumericalAxis_LabelCreated(object sender, ChartAxisLabelEventArgs e)
{
   if (double.TryParse(e.Label, out double minutes))
   {
       TimeSpan time = TimeSpan.FromMinutes(minutes);
       e.Label = new DateTime(1, 1, 1, time.Hours, time.Minutes, 0).ToString("hh:mm tt");
   }
} 

Step 5: Run the sample, the chart will be displayed with the DateTime values formatted on the Numerical Y-Axis labels as shown in the below output.

Output:

Explore the sample application available at this GitHub location.

Conclusion:
I hope you enjoyed learning about how to use DateTime values on the Y-Axis in .NET MAUI Cartesian Chart.

You can refer to our .NET MAUI Cartesian Charts feature tour page to learn about its other groundbreaking feature representations and documentation to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!