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

ChartAxis.ActualRangeChanged

ChartAxis.AutoScrollingDelta

ChartAxis.AutoScrollingDeltaProperty

ChartAxis.AutoScrollingMode

ChartAxis.AutoScrollingModeProperty

ChartAxis.AxisLineOffset

ChartAxis.AxisLineOffsetProperty

ChartAxis.AxisLineStyle

ChartAxis.AxisLineStyleProperty

ChartAxis.CalculateVisibleInterval(DoubleRange, Size)

ChartAxis.ComputeDesiredSize(Size)

ChartAxis.CrossAxisName

ChartAxis.CrossAxisNameProperty

ChartAxis.CrossesAt

ChartAxis.CrossesAtProperty

ChartAxis.DrawAxis(ICanvas, Rect)

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

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

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

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

ChartAxis.EdgeLabelsDrawingMode

ChartAxis.EdgeLabelsDrawingModeProperty

ChartAxis.EnableAutoIntervalOnZooming

ChartAxis.EnableAutoIntervalOnZoomingProperty

ChartAxis.GetActualDesiredIntervalsCount(Size)

ChartAxis.IsInversed

ChartAxis.IsInversedProperty

ChartAxis.IsVisible

ChartAxis.IsVisibleProperty

ChartAxis.LabelCreated

ChartAxis.LabelExtent

ChartAxis.LabelExtentProperty

ChartAxis.LabelRotation

ChartAxis.LabelRotationProperty

ChartAxis.LabelsIntersectAction

ChartAxis.LabelsIntersectActionProperty

ChartAxis.LabelsPosition

ChartAxis.LabelsPositionProperty

ChartAxis.LabelStyle

ChartAxis.LabelStyleProperty

ChartAxis.MajorGridLineStyle

ChartAxis.MajorGridLineStyleProperty

ChartAxis.MajorTickStyle

ChartAxis.MajorTickStyleProperty

ChartAxis.Name

ChartAxis.NameProperty

ChartAxis.OnCreateLabels()

ChartAxis.OnLabelCreated(ChartAxisLabel)

ChartAxis.OnParentSet()

ChartAxis.PlotOffsetEnd

ChartAxis.PlotOffsetEndProperty

ChartAxis.PlotOffsetStart

ChartAxis.PlotOffsetStartProperty

ChartAxis.PointToValue(Double, Double)

ChartAxis.RenderNextToCrossingValue

ChartAxis.RenderNextToCrossingValueProperty

ChartAxis.ShowMajorGridLines

ChartAxis.ShowMajorGridLinesProperty

ChartAxis.ShowTrackballLabel

ChartAxis.ShowTrackballLabelProperty

ChartAxis.TickPosition

ChartAxis.TickPositionProperty

ChartAxis.Title

ChartAxis.TitleProperty

ChartAxis.TrackballLabelStyle

ChartAxis.TrackballLabelStyleProperty

ChartAxis.TrackballLabelTemplate

ChartAxis.TrackballLabelTemplateProperty

ChartAxis.ValueToPoint(Double)

ChartAxis.VisibleLabels

ChartAxis.VisibleMaximum

ChartAxis.VisibleMinimum

ChartAxis.ZoomFactor

ChartAxis.ZoomFactorProperty

ChartAxis.ZoomPosition

ChartAxis.ZoomPositionProperty

RangeAxisBase.EdgeLabelsVisibilityMode

RangeAxisBase.EdgeLabelsVisibilityModeProperty

RangeAxisBase.MinorGridLineStyle

RangeAxisBase.MinorGridLineStyleProperty

RangeAxisBase.MinorTicksPerInterval

RangeAxisBase.MinorTicksPerIntervalProperty

RangeAxisBase.MinorTickStyle

RangeAxisBase.MinorTickStyleProperty

RangeAxisBase.OnBindingContextChanged()

RangeAxisBase.ShowMinorGridLines

RangeAxisBase.ShowMinorGridLinesProperty

Namespace: Syncfusion.Maui.Charts

Assembly: Syncfusion.Maui.Charts.dll

Syntax

public class DateTimeAxis : RangeAxisBase, IThemeElement

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
Microsoft.Maui.Controls.BindableProperty

IntervalProperty

Identifies the Interval bindable property.

Declaration

public static readonly BindableProperty IntervalProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IntervalTypeProperty

Identifies the IntervalType bindable property.

Declaration

public static readonly BindableProperty IntervalTypeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

MaximumProperty

Identifies the Maximum bindable property.

Declaration

public static readonly BindableProperty MaximumProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

MinimumProperty

Identifies the Minimum bindable property.

Declaration

public static readonly BindableProperty MinimumProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PlotBandsProperty

Identifies the PlotBands bindable property.

Declaration

public static readonly BindableProperty PlotBandsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

RangePaddingProperty

Identifies the RangePadding bindable property.

Declaration

public static readonly BindableProperty RangePaddingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Properties

ActualMaximum

Gets the actual maximum value of the DateTimeAxis.

Declaration

public DateTime ActualMaximum { get; }

Property Value

Type
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
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.

Remarks

Note: This is only applicable for SfCartesianChart.

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);

PlotBands

Gets or sets the collection of plot bands to be added to the chart axis.

Declaration

public DateTimePlotBandCollection PlotBands { get; set; }

Property Value

Type
DateTimePlotBandCollection

Examples

MainPage.xaml
MainPage.xaml.cs

 <chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis>
           <chart:DateTimeAxis.PlotBands>
               <chart:DateTimePlotBand Start="2000-01-01" Width="2" WidthType="Month"/>
           </chart:DateTimeAxis.PlotBands>
       </chart:DateTimeAxis>
    </chart:SfCartesianChart.XAxes>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis xaxis = new DateTimeAxis();
DateTimePlotBand plotBand = new DateTimePlotBand();
plotBand.Start = new DateTime(2000,01,01);
plotBand.Width = 2;
plotBand.WidthType = DateTimeIntervalType.Months;
xaxis.PlotBands.Add(plotBand);

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
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
System.Double

Overrides

ChartAxis.CalculateActualInterval(DoubleRange, Size)

CalculateActualRange()

Declaration

protected override DoubleRange CalculateActualRange()

Returns

Type
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
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
DoubleRange

Overrides

ChartAxis.CalculateVisibleRange(DoubleRange, Size)