NumericAxisX Class

The X-axis the chart uses to display series that represent data sources with numeric arguments.

Assembly: DevExpress.Maui.Charts.dll

NuGet Package: DevExpress.Maui.Charts

Declaration

public class NumericAxisX :
    AxisX

Remarks

The following image highlights elements the axis includes:

X-Axis Elements

Label
Title
Axis Line
Major Tick Mark

Minor Tick Mark
Major Grid Line
Minor Grid Line
Interlacing

Constant Line
Strip

How to: Specify chart axes

The ChartView.AxisX property contains the X-axis the chart uses to arrange series:

XAML

<dxc:ChartView>
    <dxc:ChartView.AxisX>
        <dxc:NumericAxisX>
    </dxc:ChartView.AxisX>
</dxc:ChartView>

Note

The chart creates axes compatible with the first series’ data type if the chart does not have specified axes.

How to: Manage the Value Range the Axis Display

The X-axis automatically calculates the value range by data of all series that the axis measures. To show a particular value interval, specify the range’s VisualMin and VisualMax properties:

XAML

<dxc:NumericAxisX>
    <dxc:NumericAxisX.Range>
        <dxc:NumericRange VisualMin="10" VisualMax="90">
    </dxc:NumericAxisX.Range>
</dxc:NumericAxisX>

Note

Chart zooming and scrolling change visual values. To limit the interval in which users can change a visual range, use NumericRange.Min and NumericRange.Max properties.

The following table lists all classes and properties the code above uses:

Symbol	Description
NumericAxisX.Range	Gets or sets the axis range settings. This is a bindable property.
NumericRange	Stores range settings of NumericAxisX and NumericAxisY.
NumericRange.VisualMin	Gets or sets the start value of the axis range that is currently displayed on a screen. This is a bindable property.
NumericRange.VisualMax	Gets or sets the end value of the axis range that is currently displayed on a screen. This is a bindable property.
NumericRange.Min	Gets or sets the minimum scale value of the axis. This is a bindable property.
NumericRange.Max	Gets or sets the maximum scale value of the axis. This is a bindable property.

How to: Customize X-Axis Scale Parameters

The X-Axis provides settings that manage how the axis lays out its grid lines, tick marks, and labels. The image below demonstrates these settings:

Numeric Axis X Scale Settings

Grid Offset - The distance between the first tick mark / grid line and the minimum value of the axis value range.
Grid Alignment - The number of units between neighbor major tick marks and grid lines.

The following code customizes these parameters:

XAML

<dxc:NumericAxisX GridOffset="5" GridAlignment="10"/>

How to: Manage Axis Labels

Axis Labels show the textual representation of axis values at which the axis places major tick marks and grid lines:

Axis Label Sample

The code snippet below customizes axis labels:

XAML

<dxc:NumericAxisX>
    <dxc:NumericAxisX.Label>
        <dxc:AxisLabel TextFormat="0.##">
    <dxc:NumericAxisX.Label>
</dxc:NumericAxisX>

The code above uses the following class and property:

Symbol	Description
AxisBase.Label	Provides access to the settings that specify the text format, position, and appearance of axis labels. This is a bindable property.
AxisLabel	Stores axis label settings.

How to: Specify the Axis Title

The Axis Title is additional text that explains the values the axis measures:

Axis Title Sample

The markup below enables the title that the image above shows:

XAML

<dxc:NumericAxisX>
    <dxc:NumericAxisX.Title>
        <dxc:AxisTitle Text="Year">
    <dxc:NumericAxisX.Title>
</dxc:NumericAxisX>

The following table lists API that the markup above uses:

Symbol	Description
AxisBase.Title	Gets or sets the axis title. This is a bindable property.
AxisTitle	Stores axis title settings.

How to: Add a Constant Line

A Constant Line highlights a specific axis value by a perpendicular straight line with a title:

Constant Line Sample

The following code adds the constant line to the X-axis:

XAML

<dxc:NumericAxisX>
    <dxc:NumericAxisX.ConstantLines>
        <dxc:NumericConstantLine AxisValue="2019" LegendText="Nowadays">
            <dxc:NumericConstantLine.Title>
                <dxc:ConstantLineTitle Text="Nowadays">
            </dxc:NumericConstantLine.Title>
        </dxc:NumericConstantLine>
    <dxc:NumericAxisX.ConstantLines>
</dxc:NumericAxisX>

The code above used the following classes and properties:

Symbol	Description
NumericAxisX.ConstantLines	Gets the collection of constant lines that the axis contains. This is a bindable property.
NumericConstantLine	The vertical or horizontal straight line that passes through the chart and indicates a qualitative x- or y-axis’s value.
NumericConstantLine.AxisValue	Gets or sets the constant line position along the numeric axis. This is a bindable property.
ConstantLineBase.LegendText	Gets or sets the text that identifies the constant line in the chart legend. This is a bindable property.
ConstantLineBase.Title	Gets or sets settings of the constant line title. This is a bindable property.
ConstantLineTitle	Stores constant line title settings.
TitleBase.Text	Gets or sets the text the title displays. This is a bindable property.

How to: Add a Strip

A Strip highlights a specific range of axis values using a perpendicular straight area with an axis label:

Constant Line Sample

Note

The axis hides its labels when any strip has a label.

The following code adds the strip to the X-axis:

XAML

<dxc:NumericAxisX>
    <dxc:NumericAxisX.Strips>
        <dxc:NumericStrip MinLimit="2019" MaxLimitEnabled="False">
            <dxc:NumericStrip.AxisLabel>
                <dxc:StripAxisLabel Text="Future">
            </dxc:NumericStrip.AxisLabel>
        </dxc:NumericStrip>
    <dxc:NumericAxisX.Strips>
</dxc:NumericAxisX>

The code above used the following classes and properties:

Symbol	Description
NumericAxisX.Strips	Gets the collection of strips that the axis contains. This is a bindable property.
NumericStrip	The highlighted area limited by two fixed values (minimal and maximal limits) of an axis, and is perpendicular to the axis.
NumericStrip.MinLimit	Gets or sets the minimum limiting value of the strip along an axis. This is a bindable property.
StripBase.MinLimitEnabled	Gets or sets whether the strip is limited by its `MinLimit` value. This is a bindable property.
NumericStrip.MaxLimit	Gets or sets the maximum limiting value of the strip along an axis. This is a bindable property.
StripBase.MaxLimitEnabled	Gets or sets whether the strip is limited by its `MaxLimit` value. This is a bindable property.
StripBase.LegendText	Gets or sets a text the strip provides to the chart legend. This is a bindable property.
StripBase.Title	Gets or sets the axis label the strip displays on the axis to which the strip belongs. This is a bindable property.
StripAxisLabel	Stores the strip’s axis label settings.
StripAxisLabel.Text	Gets or sets the text of a strip’s axis label. This is a bindable property.

How to: Customize Axis Appearance

The axis provides the Style property that stores the appearance of the following elements:

Axis Appearance Settings

	Element	Properties That Affect the Element
1.	Axis Line	LineColor, LineThickness, LineVisible
2.	Major Tick Marks	LineColor, MajorTickmarksThickness, MajorTickmarksLength, MajorTickmarksVisible
3.	Minor Tick Marks	LineColor, MinorTickmarksThickness, MinorTickmarksLength, MinorTickmarksVisible
2.	Major Grid Lines	MajorGridlinesThickness, MajorGridlinesColor, MajorGridlinesVisible
3.	Minor Grid Lines	MinorGridlinesThickness, MinorGridlinesColor, MinorGridLinesVisible