How to plot date-time values in vertical axes in .NET MAUI Chart (SfCartesianChart)?
.Net MAUI Chart supports plotting date-time values in the y-axis, converting the date-time values to double while 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 in the y-axis.
This article explains how to plot date-time values in the y-axis to 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 in the y-axis, add NumericalAxis in 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);
}
You can download the complete sample in GitHub
Output
Conclusion
I hope you enjoyed learning about how to plot date-time values in vertical axes in .NET MAUI Chart (SfCartesianChart).
You can refer to our .NET MAUI Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, you can check out our .NET MAUI 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 .NET MAUI Chart and other .NET MAUI components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
