How to plot date-time values in vertical axes in .NET MAUI Chart (SfCartesianChart)?
The .NET MAUI Chart supports plotting date-time values on the y-axis by converting these values to double when populating the items source for the MAUI Chart and reversing the conversion (double to date-time) in the LabelCreated event of ChartAxis. By using the NumericalAxis with the above conversions, you can display the date-time values on the y-axis.
This article explains how to plot date-time values on the y-axis in the .NET MAUI Chart with the following steps.
Step 1: Create a data model class that represents a data point for the chart.
[C#]
public class Model
{
private DateTime checkInTime;
public string Name { get; set; }
public double CheckIn { get; set; }
public DateTime CheckInTime
{
get { return checkInTime; }
set
{
checkInTime = value;
CheckIn = value.ToOADate();
}
}
}
Step 2: Create a ViewModel class with a Data Collection property using the above model and initialize a list of objects as shown in the following code sample.
[C#]
public class ViewModel
{
public ObservableCollection<Model> Data { get; set; }
public double Minimum { get; set; }
public ViewModel()
{
// Converting date time value to its respective double value.
Data = new ObservableCollection<Model>()
{
new Model(){Name = "Jack", CheckInTime = new DateTime(2022, 11, 8, 14, 30, 0)},
new Model(){Name = "Drake", CheckInTime = new DateTime(2022, 11, 8, 10, 0, 0)},
new Model(){Name = "Aron", CheckInTime = new DateTime(2022, 11, 8, 15, 45, 0)},
new Model(){Name="John", CheckInTime = new DateTime(2022, 11, 8, 11, 25, 0)},
new Model(){Name = "Shawn", CheckInTime = new DateTime(2022, 11, 8, 13, 10, 0)},
};
Minimum = new DateTime(2022, 11, 8).ToOADate();
}
}
Step 3: To display the date-time values on the y-axis, add NumericalAxis to the YAxes collection and convert the double values to the date-time in the LabelCreated event of ChartAxis.
[XAML]
<chart:SfCartesianChart Title="Check-in time Nov-8-2022" Margin="20">
<chart:SfCartesianChart.BindingContext>
<local:ViewModel />
</chart:SfCartesianChart.BindingContext>
<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis>
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle Text="Name"/>
</chart:CategoryAxis.Title>
</chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis LabelCreated="OnNumericalAxisLabelCreated"
Minimum="{Binding Minimum}">
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle Text="Check-in time (hh mm)"/>
</chart:NumericalAxis.Title>
</chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
<chart:ColumnSeries ItemsSource="{Binding Data}"
XBindingPath="Name"
YBindingPath="CheckIn"/>
</chart:SfCartesianChart>
[C#]
private void OnNumericalAxisLabelCreated(object sender, ChartAxisLabelEventArgs e)
{
double value = Convert.ToDouble(e.Label);
// Converting double value to its respective date time value.
var date = DateTime.FromOADate(value);
// formatting date time string to display on the y-axis
e.Label = String.Format("{0:hh:mm tt }", date);
}Output
Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to plot date-time values in vertical axes in .NET MAUI Chart (SfCartesianChart).
You can refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
