.NET MAUI Cartesian Chart Date-Time Axis

Updated on Aug 12, 2026

The DateTimeAxis positions the data points on a time line depending on a System.DateTime value. Instead of treating each value as an isolated category, the axis builds time slots based on its range and step, which allows it to display empty time slots when no data exists for a given interval.

You define the axis through the HorizontalAxis, the VerticalAxis, or the Axes collection of the RadCartesianChart.

Axis Location

Use the Location (enum of type Telerik.Maui.Controls.Charts.ChartAxisLocation) property to specify the axis location. The available options are Left, Right, Top, or Bottom.

Line Styling

Use the following properties to customize the appearance of the axis line:

• LineColor (Color)—Defines the color of the axis line.
• LineThickness (double)—Defines the thickness of the axis line.

Range and Ticks

Use the following properties to control the time line range, the interval between ticks, and their appearance:

• Minimum (DateTime)—Defines the minimum value of the axis range.
• Maximum (DateTime)—Defines the maximum value of the axis range.
• MajorStep (double)—Defines the interval between adjacent ticks.
• MajorStepUnit (Telerik.Maui.Controls.Charts.ChartTimeInterval)—Defines which DateTime component the MajorStep value refers to: None,Year, Quarter, Month, Week, Day, Hour, Minute, Second, or Millisecond. The default value is None, so the chart engine choose both the unit and the step automatically based on the axis range and DesiredTickCount.
• WeekStartDay (DayOfWeek)—Defines the first day of the week when the MajorStepUnit is set to Week. The default value is Monday.
• DesiredTickCount (int)—Defines the number of ticks the axis renders.
• MajorTickColor (Color)—Defines the color of the major ticks.
• MajorTickThickness (double)—Defines the thickness of the major ticks.
• MajorTickLength (double)—Defines the length of the major ticks.

Labels Styling

Use the following properties for configuring the axis labels and their appearance:

• LabelFormat (string)—Defines the format string that is applied to the axis labels, for example "dd-MM-yy" or "HH:mm".
• ShowLabels (bool)—Defines whether the axis displays labels.
• LabelStyle (Style with target type ChartLabelAppearance)—Defines the style of the axis labels.
• LabelInterval (int)—Defines the step at which the axis renders labels.

Example

The following example shows how to define a DateTimeAxis with a custom step and label format.

1. Define the DateTimeAxis as the horizontal axis of the chart.

XAML

<charts:RadCartesianChart>
    <charts:RadCartesianChart.BindingContext>
        <models:DateTimeViewModel />
    </charts:RadCartesianChart.BindingContext>
    <charts:RadCartesianChart.Resources>
        <Style x:Key="axisLabelStyle" TargetType="charts:ChartLabelAppearance">
            <Setter Property="TextColor" Value="#3F51B5" />
            <Setter Property="FontSize" Value="11" />
            <Setter Property="FontAttributes" Value="Bold" />
        </Style>
    </charts:RadCartesianChart.Resources>
    <charts:RadCartesianChart.Axes>
        <charts:DateTimeAxis MajorStep="1"
                             MajorStepUnit="Month"
                             MajorTickColor="#865FC5"
                             MajorTickThickness="3"
                             MajorTickLength="8"
                             LabelFormat="MMM/yyyy"
                             LineColor="#FF453A"
                             LineThickness="2"
                             LabelStyle="{StaticResource axisLabelStyle}" />
        <charts:NumericalAxis Location="Left"
                              MajorTickLength="8"
                              MajorTickThickness="3"
                              LineColor="#0B84FF"
                              LineThickness="2"
                              LabelStyle="{StaticResource axisLabelStyle}" />
    </charts:RadCartesianChart.Axes>
    <charts:RadCartesianChart.Series>
        <charts:LineSeries HorizontalBinding="Date"
                           VerticalBinding="Value"
                           ItemsSource="{Binding Data}" />
    </charts:RadCartesianChart.Series>
</charts:RadCartesianChart>

2. Add the charts namespace:

XAML

xmlns:charts="clr-namespace:Telerik.Maui.Controls.Charts;assembly=Telerik.Maui.Controls"

3. Add the data model:

C#

public class DateTimeData
{
    public DateTime Date { get; set; }

    public double Value { get; set; }
}

4. Add the ViewModel:

C#

public class DateTimeViewModel
{
    public ObservableCollection<DateTimeData> Data { get; } = new ObservableCollection<DateTimeData>
    {
        new DateTimeData { Date = new DateTime(2024, 1, 1), Value = 42 },
        new DateTimeData { Date = new DateTime(2024, 2, 1), Value = 58 },
        new DateTimeData { Date = new DateTime(2024, 3, 1), Value = 37 },
        new DateTimeData { Date = new DateTime(2024, 4, 1), Value = 71 },
        new DateTimeData { Date = new DateTime(2024, 5, 1), Value = 64 },
        new DateTimeData { Date = new DateTime(2024, 6, 1), Value = 88 },
    };
}

This is the result:

For runnable examples with the Cartesian Chart axes, go to the SDKBrowser Demo Application and navigate to the Chart > Axes category.

See Also

• Categorical Axis
• Grid Lines