Skip to main content

NumericAxisX Class

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

Namespace: DevExpress.XamarinForms.Charts

Assembly: DevExpress.XamarinForms.Charts.dll

NuGet Package: DevExpress.XamarinForms.Charts

Declaration

public class NumericAxisX :
    AxisX

Remarks

The following image highlights elements the axis includes:

X-Axis Elements

  1. Label
  2. Title
  3. Axis Line
  4. Major Tick Mark
  1. Minor Tick Mark
  2. Major Grid Line
  3. Minor Grid Line
  4. Interlacing
  1. Constant Line
  2. Strip

How to: Specify chart axes

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

<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:

<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

Specifies the axis range settings.

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.

NumericRange.VisualMax

Gets or sets the end value of the axis range that is currently displayed on a screen.

NumericRange.Min

Gets or sets the minimum scale value of the axis.

NumericRange.Max

Gets or sets the maximum scale value of the axis.

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

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

The following code customizes these parameters:

<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 demonstrates how to customize axis labels:

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

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:

<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

Specifies the axis title.

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:

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

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.

ConstantLineBase.LegendText

Gets or sets the text that identifies the constant line in the chart legend.

ConstantLineBase.Title

Gets or sets settings of the constant line title.

ConstantLineTitle

Stores constant line title settings.

TitleBase.Text

Gets or sets the text the title displays.

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:

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

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.

StripBase.MinLimitEnabled

Indicates whether the strip is limited by its MinLimit value.

NumericStrip.MaxLimit

Gets or sets the maximum limiting value of the strip along an axis.

StripBase.MaxLimitEnabled

Indicates whether the strip is limited by its MaxLimit value.

StripBase.LegendText

Gets or sets a text the strip provides to the chart legend.

StripBase.Title

Gets or sets the axis label the strip displays on the axis to which the strip belongs.

StripAxisLabel

Stores the strip’s axis label settings.

StripAxisLabel.Text

Specifies the text of a strip’s axis label.

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

Note

Labels, Titles, Constant Lines and Strips provide their Style properties that manage the appearance of these elements.

See Also