Class DateTimeAxis

DateTimeAxis is used to plot DateTime values. The date-time axis uses date time scale and displays date-time values as axis labels in the specified format.

Inheritance

System.Object

ChartAxis

RangeAxisBase

DateTimeAxis

Inherited Members

RangeAxisBase.MinorTicksPerIntervalProperty

RangeAxisBase.EdgeLabelsVisibilityModeProperty

RangeAxisBase.MinorGridLineStyleProperty

RangeAxisBase.MinorTickStyleProperty

RangeAxisBase.ShowMinorGridLinesProperty

RangeAxisBase.OnBindingContextChanged()

RangeAxisBase.EdgeLabelsVisibilityMode

RangeAxisBase.MinorTicksPerInterval

RangeAxisBase.MinorGridLineStyle

RangeAxisBase.MinorTickStyle

RangeAxisBase.ShowMinorGridLines

ChartAxis.IsVisibleProperty

ChartAxis.AxisLineOffsetProperty

ChartAxis.LabelRotationProperty

ChartAxis.LabelStyleProperty

ChartAxis.AxisLineStyleProperty

ChartAxis.CrossesAtProperty

ChartAxis.RenderNextToCrossingValueProperty

ChartAxis.CrossAxisNameProperty

ChartAxis.TitleProperty

ChartAxis.IsInversedProperty

ChartAxis.EdgeLabelsDrawingModeProperty

ChartAxis.MajorGridLineStyleProperty

ChartAxis.MajorTickStyleProperty

ChartAxis.ZoomPositionProperty

ChartAxis.ZoomFactorProperty

ChartAxis.ShowMajorGridLinesProperty

ChartAxis.NameProperty

ChartAxis.PlotOffsetStartProperty

ChartAxis.PlotOffsetEndProperty

ChartAxis.EnableAutoIntervalOnZoomingProperty

ChartAxis.ShowTrackballLabelProperty

ChartAxis.TrackballLabelStyleProperty

ChartAxis.AutoScrollingModeProperty

ChartAxis.AutoScrollingDeltaProperty

ChartAxis.LabelExtentProperty

ChartAxis.ValueToPoint(Double)

ChartAxis.PointToValue(Double, Double)

ChartAxis.GetActualDesiredIntervalsCount(Size)

ChartAxis.OnLabelCreated(ChartAxisLabel)

ChartAxis.CalculateVisibleInterval(DoubleRange, Size)

ChartAxis.ComputeDesiredSize(Size)

ChartAxis.DrawAxis(ICanvas, Rect)

ChartAxis.DrawMajorTick(ICanvas, Double, PointF, PointF)

ChartAxis.DrawMinorTick(ICanvas, Double, PointF, PointF)

ChartAxis.DrawAxisLine(ICanvas, Single, Single, Single, Single)

ChartAxis.DrawGridLine(ICanvas, Double, Single, Single, Single, Single)

ChartAxis.IsVisible

ChartAxis.PlotOffsetStart

ChartAxis.PlotOffsetEnd

ChartAxis.AxisLineOffset

ChartAxis.LabelRotation

ChartAxis.LabelStyle

ChartAxis.AxisLineStyle

ChartAxis.CrossesAt

ChartAxis.RenderNextToCrossingValue

ChartAxis.CrossAxisName

ChartAxis.Title

ChartAxis.IsInversed

ChartAxis.EdgeLabelsDrawingMode

ChartAxis.MajorGridLineStyle

ChartAxis.MajorTickStyle

ChartAxis.ZoomPosition

ChartAxis.ZoomFactor

ChartAxis.ShowMajorGridLines

ChartAxis.EnableAutoIntervalOnZooming

ChartAxis.ShowTrackballLabel

ChartAxis.TrackballLabelStyle

ChartAxis.AutoScrollingDelta

ChartAxis.AutoScrollingMode

ChartAxis.Name

ChartAxis.LabelExtent

ChartAxis.LabelCreated

ChartAxis.ActualRangeChanged

Namespace: Syncfusion.Maui.Charts

Assembly: Syncfusion.Maui.Charts.dll

Syntax

public class DateTimeAxis : RangeAxisBase

Remarks

To render an axis, the datetime axis instance to be added in chart’s XAxes collection as per the following code snippet.

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

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

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis xaxis = new DateTimeAxis();
chart.XAxes.Add(xaxis);

Title - To render the title, refer to this Title property.

Grid Lines - To show and customize the grid lines refer these ShowMajorGridLines, and MajorGridLineStyle, ShowMinorGridLines, MinorTicksPerInterval, MinorGridLineStyle properties.

Tick Lines - To show and customize the tick lines refer these MajorTickStyle, MinorTickStyle, MinorTicksPerInterval properties.

Axis Line - To customize the axis line using the AxisLineStyle property.

Range Customization - To customize the axis range with help of the Minimum, and Maximum properties.

Labels Customization - To customize the axis labels, refer to this LabelStyle property.

Inversed Axis - Inverse the axis using the IsInversed property.

Axis Crossing - For axis crossing, refer these CrossesAt, CrossAxisName, and RenderNextToCrossingValue properties.

Interval - To define the axis labels interval using the Interval, and IntervalType properties.

Constructors

DateTimeAxis()

Declaration

public DateTimeAxis()

Fields

AutoScrollingDeltaTypeProperty

Identifies the AutoScrollingDeltaType bindable property.

Declaration

public static readonly BindableProperty AutoScrollingDeltaTypeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

IntervalProperty

Identifies the Interval bindable property.

Declaration

public static readonly BindableProperty IntervalProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

IntervalTypeProperty

Identifies the IntervalType bindable property.

Declaration

public static readonly BindableProperty IntervalTypeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

MaximumProperty

Identifies the Maximum bindable property.

Declaration

public static readonly BindableProperty MaximumProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

MinimumProperty

Identifies the Minimum bindable property.

Declaration

public static readonly BindableProperty MinimumProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

RangePaddingProperty

Identifies the RangePadding bindable property.

Declaration

public static readonly BindableProperty RangePaddingProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

Properties

ActualMaximum

Gets the actual maximum value of the DateTimeAxis.

Declaration

public DateTime ActualMaximum { get; }

Property Value

Type	Description
System.DateTime

  <VerticalStackLayout>
    <Label Text="{Binding Source={x:Reference xAxis}, Path=ActualMaximum }" />
    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:DateTimeAxis x:Name="xAxis"/>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis x:Name="yAxis"/>
          </chart:SfCartesianChart.YAxes>

          <chart:SfCartesianChart.Series>
              <chart:ColumnSeries ItemsSource="{Binding Data}"
                                  XBindingPath="XValue"
                                  YBindingPath="YValue" />
          </chart:SfCartesianChart.Series>

    </chart:SfCartesianChart>
  </VerticalStackLayout>

    SfCartesianChart chart = new SfCartesianChart();

    DateTimeAxis xAxis = new DateTimeAxis();
    NumericalAxis yAxis = new NumericalAxis();

    chart.XAxes.Add(xAxis);
    chart.YAxes.Add(yAxis);

    ColumnSeries series = new ColumnSeries();
    series.ItemsSource = viewmodel.Data;
    series.XBindingPath = "XValue";
    series.YBindingPath = "YValue";
    chart.Series.Add(series);

    Label label = new Label();
    label.SetBinding(Label.TextProperty, new Binding("ActualMaximum", source: xAxis));

ActualMinimum

Gets the actual minimum value of the DateTimeAxis.

Declaration

public DateTime ActualMinimum { get; }

Property Value

Type	Description
System.DateTime

Examples

MainWindow.xaml
MainWindow.cs

  <VerticalStackLayout>
    <Label Text="{Binding Source={x:Reference xAxis}, Path=ActualMinimum }" />
    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:DateTimeAxis x:Name="xAxis"/>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis x:Name="yAxis"/>
          </chart:SfCartesianChart.YAxes>

          <chart:SfCartesianChart.Series>
              <chart:ColumnSeries ItemsSource="{Binding Data}"
                                  XBindingPath="XValue"
                                  YBindingPath="YValue" />
          </chart:SfCartesianChart.Series>

    </chart:SfCartesianChart>
  </VerticalStackLayout>

    SfCartesianChart chart = new SfCartesianChart();

    DateTimeAxis xAxis = new DateTimeAxis();
    NumericalAxis yAxis = new NumericalAxis();

    chart.XAxes.Add(xAxis);
    chart.YAxes.Add(yAxis);

    ColumnSeries series = new ColumnSeries();
    series.ItemsSource = viewmodel.Data;
    series.XBindingPath = "XValue";
    series.YBindingPath = "YValue";
    chart.Series.Add(series);

    Label label = new Label();
    label.SetBinding(Label.TextProperty, new Binding("ActualMinimum", source: xAxis));

AutoScrollingDeltaType

Gets or sets the date time unit of the AutoScrollingDelta value. The value can be set to years, months, days, hours, minutes, seconds and auto.

Declaration

public DateTimeIntervalType AutoScrollingDeltaType { get; set; }

Property Value

Type	Description
DateTimeIntervalType	It accepts DateTimeIntervalType values, and its default value is Auto, which means that the date time unit of the delta value will be automatically calculated based on the data points.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>
   <chart:SfCartesianChart.XAxes>
       <chart:DateTimeAxis AutoScrollingDeltaType="Years"/>
   </chart:SfCartesianChart.XAxes>
</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis xAxis = new DateTimeAxis();
xAxis.AutoScrollingDeltaType = DateTimeIntervalType.Years;

chart.XAxes.Add(xAxis);

Interval

Gets or sets a value that can be used to change the interval between labels.

Declaration

public double Interval { get; set; }

Property Value

Type	Description
System.Double	It accepts `double` values and the default value is double.NaN.

Remarks

If this property is not set, the interval will be calculated automatically.

By default, the interval will be calculated based on the minimum and maximum values of the provided data.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

        <chart:SfCartesianChart.XAxes>
            <chart:DateTimeAxis Interval="6" IntervalType="Months" />
        </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis xaxis = new DateTimeAxis()
{
   Interval = 6, 
   IntervalType = DateTimeIntervalType.Months
};
chart.XAxes.Add(xaxis);

IntervalType

Gets or sets the date time unit of the value specified in the Interval property.

Declaration

public DateTimeIntervalType IntervalType { get; set; }

Property Value

Type	Description
DateTimeIntervalType	It accepts the DateTimeIntervalType value and its default value is Auto.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

        <chart:SfCartesianChart.XAxes>
            <chart:DateTimeAxis IntervalType="Months"/>
        </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis xaxis = new DateTimeAxis()
{
    IntervalType = DateTimeIntervalType.Months
};
chart.XAxes.Add(xaxis);

Maximum

Gets or sets the maximum value of the time period to be displayed on the chart axis.

Declaration

public Nullable<DateTime> Maximum { get; set; }

Property Value

Type	Description
System.Nullable<System.DateTime>	It accepts DateTime values and the default value is null.

Remarks

If we didn't set the maximum value, it will be calculated from the underlying collection.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

        <chart:SfCartesianChart.XAxes>
            <chart:DateTimeAxis Minimum="2021/05/10" Maximum="2021/11/01"/>
        </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis xaxis = new DateTimeAxis()
{
    Minimum = new DateTime(2021,05,10),
    Maximum = new DateTime(2021,11,01),
};
chart.XAxes.Add(xaxis);

Minimum

Gets or sets the minimum value of the time period to be displayed on the chart axis.

Declaration

public Nullable<DateTime> Minimum { get; set; }

Property Value

Type	Description
System.Nullable<System.DateTime>	It accepts DateTime values and the default value is null.

Remarks

If we didn't set the minimum value, it will be calculated from the underlying collection.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

        <chart:SfCartesianChart.XAxes>
            <chart:DateTimeAxis Minimum="2021/05/10" Maximum="2021/11/01"/>
        </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis xaxis = new DateTimeAxis()
{
    Minimum = new DateTime(2021,05,10),
    Maximum = new DateTime(2021,11,01),
};
chart.XAxes.Add(xaxis);

RangePadding

Gets or sets a padding type for the date time axis range.

Declaration

public DateTimeRangePadding RangePadding { get; set; }

Property Value

Type	Description
DateTimeRangePadding	It acceps the DateTimeRangePadding value and its default value is Auto.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

        <chart:SfCartesianChart.XAxes>
            <chart:DateTimeAxis RangePadding ="Round" />
        </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis xaxis = new DateTimeAxis()
{
    RangePadding = DateTimeRangePadding.Round,
};
chart.XAxes.Add(xaxis);

Methods

ApplyRangePadding(DoubleRange, Double)

Declaration

protected override DoubleRange ApplyRangePadding(DoubleRange range, double interval)

Parameters

Type	Name	Description
DoubleRange	range
System.Double	interval

Returns

Type	Description
DoubleRange

Overrides

ChartAxis.ApplyRangePadding(DoubleRange, Double)

CalculateActualInterval(DoubleRange, Size)

Declaration

protected override double CalculateActualInterval(DoubleRange range, Size availableSize)

Parameters

Type	Name	Description
DoubleRange	range
Microsoft.Maui.Graphics.Size	availableSize

Returns

Type	Description
System.Double

Overrides

ChartAxis.CalculateActualInterval(DoubleRange, Size)

CalculateActualRange()

Declaration

protected override DoubleRange CalculateActualRange()

Returns

Type	Description
DoubleRange

Overrides

ChartAxis.CalculateActualRange()

CalculateNiceInterval(DoubleRange, Size)

Declaration

protected override double CalculateNiceInterval(DoubleRange actualRange, Size availableSize)

Parameters

Type	Name	Description
DoubleRange	actualRange
Microsoft.Maui.Graphics.Size	availableSize

Returns

Type	Description
System.Double

Overrides

ChartAxis.CalculateNiceInterval(DoubleRange, Size)

CalculateVisibleRange(DoubleRange, Size)

Declaration

protected override DoubleRange CalculateVisibleRange(DoubleRange range, Size availableSize)

Parameters

Type	Name	Description
DoubleRange	range
Microsoft.Maui.Graphics.Size	availableSize

Returns

Type	Description
DoubleRange

Overrides

ChartAxis.CalculateVisibleRange(DoubleRange, Size)