Axis Scale Types

• Jan 16, 2024
• 13 minutes to read

This topic explains how to specify axis scale options for different types of series point arguments and values (Numerical, Date-Time, Time-Span, and Qualitative). Scale options allow you to set scale parameters as an axis measurement unit, grid spacing, grid offset, and an aggregate function.

Numeric x-axis

DateTime x-axis

TimeSpan x-axis

Qualitative x-axis

This document consists of the following sections:

• Determine X-Axis Scale Type Automatically
• Handle an Axis with a Numeric Scale
• Handle an Axis with a Date-Time Scale
• Handle an Axis with a Time-Span Scale
• Handle an Axis with a Qualitative Scale
• Change Intervals between Major Tick Marks
• Grid Alignment vs Grid Spacing
• Customize Layout of Grid Lines and Axis Labels

Tip

1. To choose between date-time and time-span values, refer to the Choosing between DateTime, DateTimeOffset, TimeSpan, and TimeZoneInfo document (see the The DateTime structure and The TimeSpan structure sections).

2. To format text labels the Chart displays on an axis, use the AxisLabel.TextPattern property.

3. You can configure whole and visual ranges to limit the axis scale value range.

Determine X-Axis Scale Type Automatically

The Chart Control determines an x-axis’s scale type based on underlying data (Series.ArgumentScaleType is set to Auto ). Note that this operation requires additional CPU and RAM resources. Use the Series.ArgumentScaleType to explicitly specify the argument type. See Best Practices: Display Large Data for more information.

Handle an Axis with a Numeric Scale

The Chart Control interprets series point arguments and values as numbers when the scale type is Numerical.

To force the Chart to process arguments and values as numbers, set the Series.ArgumentScaleType/Series.ValueScaleType property to ScaleType.Numerical.

• XAML

<dxc:LineSeries2D ArgumentScaleType="Numerical" ValueScaleType="Numerical"/>

To configure numeric x-axis options, set its NumericScaleOptions (AxisX2D.NumericScaleOptions, AxisX3D.NumericScaleOptions or CircularAxisX2D.NumericScaleOptions) property to one of the following objects:

For instance, the following example uses the manual scale options to divide an x-axis scale to intervals of 100 units, and applies the Average aggregate function to each interval:

ManualNumericScaleOptions are applied to the x-axis.

Scale options are not defined.

• XAML

<dxc:AxisX2D.NumericScaleOptions>
    <dxc:ManualNumericScaleOptions AggregateFunction="Average" 
                                   MeasureUnit="100"/>
</dxc:AxisX2D.NumericScaleOptions>

A y-axis can only have a continuous scale. To change numeric y-axis options, set its NumericScaleOptions (AxisY2D.NumericScaleOptions, AxisY3D.NumericScaleOptions or CircularAxisY2D.NumericScaleOptions) to a ContinuousTimeSpanScaleOptions object.

Display Numeric Values on a Logarithmic Scale

You can use a logarithmic scale to display numeric values. The Chart Control allows you to specify a logarithm’s base (the default value is 10 ).

Note

25.2 Demo Center: Launch the Logarithmic Scale demo

A logarithmic scale is enabled for the y-axis.

A logarithmic scale is disabled.

The following example enables the logarithmic view for a y-axis:

• XAML

<dxc:XYDiagram2D.AxisY>
    <dxc:AxisY2D Logarithmic="True" 
                 LogarithmicBase="10"/>
</dxc:XYDiagram2D.AxisY>

The example above uses the following API members:

Handle an Axis with a Date-Time Scale

The Chart Control can handle series point arguments/values as the DateTime values, for example, 01/01/2017 18:00 AM , November 10 , etc.

Note

25.2 Demo Center: Launch the Date-Time Scale demo

To make the Chart process arguments/values as date-time values, set Series.ArgumentScaleType/Series.ValueScaleType property to ScaleType.DateTime.

• XAML

<dxc:LineSeries2D ArgumentScaleType="DateTime" ValueScaleType="Numerical"/>

To configure a date-time x-axis’s options, set its DateTimeScaleOptions (AxisX2D.DateTimeScaleOptions, AxisX3D.DateTimeScaleOptions or RadarAxisX2D.DateTimeScaleOptions) property to one of the following objects:

A y-axis can only have a continuous scale. To change a date-time y-axis’s options, set its DateTimeScaleOptions (AxisY2D.DateTimeScaleOptions, AxisY3D.DateTimeScaleOptions or CircularAxisY2D.DateTimeScaleOptions) to a ContinuousDateTimeScaleOptions object.

Tip

You can exclude holidays, weekends or particular hours from a date-time axis’s scale.

Define Measurement Units

The Chart Control divides an axis scale into day intervals if the measurement unit is not specified. However, this can create large gaps between series points. To improve the chart’s readability, define the correct measurement unit for your data. Data points with the same measurement unit are aggregated into one point (for example, data points in the same month).

MeasureUnit = Day (default)

MeasureUnit = Month

The charts above visualize the following data:

The following code shows how to specify a measurement unit:

• XAML

<dxc:XYDiagram2D>
    <dxc:BarSideBySideSeries2D>
        <dxc:SeriesPoint Argument="2019/01/01" Value="5"/>
        <dxc:SeriesPoint Argument="2019/01/02" Value="6"/>
        <dxc:SeriesPoint Argument="2019/02/01" Value="6"/>
        <dxc:SeriesPoint Argument="2019/03/01" Value="7"/>
    </dxc:BarSideBySideSeries2D>
    <dxc:XYDiagram2D.AxisX>
        <dxc:AxisX2D>
            <dxc:AxisX2D.DateTimeScaleOptions>
                <dxc:ManualDateTimeScaleOptions MeasureUnit="Month"/>
            </dxc:AxisX2D.DateTimeScaleOptions>
        </dxc:AxisX2D>
    </dxc:XYDiagram2D.AxisX>
</dxc:XYDiagram2D>

Customize a Date-Time Axis’s Label Display Mode

Use the GridAlignment property to choose a date-time unit used to display axis labels.

The date-time x-axis’s alignment is set to Year.

The date-time x-axis’s alignment is set to Month.

Disable the AutoGrid property before GridAlignment is configured:

• XAML

<dxc:XYDiagram2D.AxisX>
    <dxc:AxisX2D>
        <dxc:AxisX2D.DateTimeScaleOptions>
            <dxc:ManualDateTimeScaleOptions AutoGrid="False" GridAlignment="Year"/>
        </dxc:AxisX2D.DateTimeScaleOptions>
    </dxc:AxisX2D>
</dxc:XYDiagram2D.AxisX>

You can use the following APIs to access the GridAlignment property:

The Chart Control automatically calculates an optimal grid spacing value when an x-axis’s date-time scale options are set to AutomaticDateTimeScaleOptions.

Handle an Axis with a Time-Span Scale

You can set the Series.ArgumentScaleType/Series.ValueScaleType property to ScaleType.TimeSpan to process arguments or values associated with a time-span axis as TimeSpan values, for example, 00:00:00 , 00:00:01 , 00:00:02.

To make the Chart process arguments/values as time-span values, set Series.ArgumentScaleType/Series.ValueScaleType property to ScaleType.TimeSpan.

• XAML

<dxc:LineSeries2D ArgumentScaleType="TimeSpan" ValueScaleType="TimeSpan"/>

To configure a time-span x-axis’s options, set its TimeSpanScaleOptions (AxisX2D.TimeSpanScaleOptions, AxisX3D.TimeSpanScaleOptions or RadarAxisX2D.TimeSpanScaleOptions) property to one of the following objects:

A y-axis can only have a continuous scale. To change a time-span y-axis’s options, set its TimeSpanScaleOptions (AxisY2D.TimeSpanScaleOptions, AxisY3D.TimeSpanScaleOptions or CircularAxisY2D.TimeSpanScaleOptions) to a ContinuousTimeSpanScaleOptions object.

Tip

Time-span x-axes support data aggregation.

Customize a Time-Span Axis’s Label Display Mode

Use the GridAlignment property to choose a date-time unit used to display axis labels.

The x-axis’s alignment is set to Hour.

The x-axis’s alignment is set to Day.

Disable the AutoGrid property before GridAlignment is configured:

• XAML

<dxc:XYDiagram2D.AxisX>
    <dxc:AxisX2D>
        <dxc:AxisX2D.TimeSpanScaleOptions>
            <dxc:ManualTimeSpanScaleOptions AutoGrid="False" GridAlignment="Hour"/>
        </dxc:AxisX2D.TimeSpanScaleOptions>                          
    </dxc:AxisX2D>
</dxc:XYDiagram2D.AxisX>

You can use the following APIs to access the GridAlignment property:

The Chart Control automatically calculates an optimal grid spacing value when an x-axis’s date-time scale options are set to AutomaticTimeSpanScaleOptions.

Handle an Axis with a Qualitative Scale

The qualitative axis scale allows you to handle series whose arguments are string categories (for example, A , B , C , X , XII , etc.). Note that the qualitative scale type is only available for x-axes.

To make the Chart process arguments as qualitative values, set Series.ArgumentScaleType property to ScaleType.Qualitative.

• XAML

<dxc:LineSeries2D ArgumentScaleType="Qualitative" ValueScaleType="Numerical"/>

To change a qualitative x-axis options, set its QualitativeScaleOptions (AxisX2D.QualitativeScaleOptions, AxisX3D.QualitativeScaleOptions or RadarAxisX2D.QualitativeScaleOptions to a QualitativeScaleOptions object.

Tip

Qualitative x-axes support data aggregation.

The following images show how a qualitative axis works with various qualitative series points’ arguments:

• Qualitative arguments follow one after another when series have different qualitative arguments:

• Series overlap when one series uses a secondary axis:

• You can plot a series in a separate pane to resolve overlapping series:

• Different series’ points are grouped by equal string arguments:

Prevent Hiding Axis Labels

The Chart Control hides axis labels if there is insufficient space. When you use a qualitative scale, you can disable QualitativeScaleOptions.AutoGrid, set QualitativeScaleOptions.GridSpacing to 1 , and change the Resolve Overlapping Algorithm options to show all the string arguments for the data series.

• XAML

<dxc:XYDiagram2D.AxisX>
    <dxc:AxisX2D>
        <dxc:AxisX2D.QualitativeScaleOptions>
            <dxc:QualitativeScaleOptions AutoGrid="False" GridSpacing="1"/>
        </dxc:AxisX2D.QualitativeScaleOptions>
        <dxc:AxisX2D.Label>
            <dxc:AxisLabel>
                <dxc:Axis2D.ResolveOverlappingOptions>
                    <dxc:AxisLabelResolveOverlappingOptions AllowHide="False" 
                                                            AllowRotate="True" 
                                                            AllowStagger="True"/>
                </dxc:Axis2D.ResolveOverlappingOptions>
            </dxc:AxisLabel>
        </dxc:AxisX2D.Label>
    </dxc:AxisX2D>
</dxc:XYDiagram2D.AxisX>

See the Axis Labels: How to Resolve Axis Label Overlapping section for more information.

How to Sort Qualitative Axis Values

To do this, assign an object that implements the IComparer interface to the AxisBase.QualitativeScaleComparer property to specify a custom qualitative scale value order.

• MainWindow.xaml
• NumberComparer.cs
• NumberComparer.vb

<dxc:XYDiagram2D.AxisX>
    <dxc:AxisX2D>
        <dxc:AxisX2D.QualitativeScaleComparer>
            <local:NumberComparer/>
        </dxc:AxisX2D.QualitativeScaleComparer>
    </dxc:AxisX2D>
</dxc:XYDiagram2D.AxisX>

using System;
using System.Collections;

namespace CustomSortOrder {
    class NumberComparer : IComparer {
        public int Compare(object x, object y) {
            int iX = NumberConverter.ToInt(x);
            int iY = NumberConverter.ToInt(y);
            return iX - iY;
        }
    }

    class NumberConverter {
        public static int ToInt(object o) {
            string stringNumber = o as string;
            int number = 0;
            if (stringNumber == null) return -1;
            if (Int32.TryParse(stringNumber, out number))
                return number;
            switch (stringNumber.ToLower()) {
                case "one": return 1;
                case "two": return 2;
                case "three": return 3;
            }
            return number;
        }
    }
}

Imports System
Imports System.Collections

Namespace CustomSortOrder
    Friend Class NumberComparer
        Implements IComparer

        Public Function Compare(ByVal x As Object, ByVal y As Object) As Integer Implements IComparer.Compare
            Dim iX As Integer = NumberConverter.ToInt(x)
            Dim iY As Integer = NumberConverter.ToInt(y)
            Return iX - iY
        End Function
    End Class

    Friend Class NumberConverter
        Public Shared Function ToInt(ByVal o As Object) As Integer
            Dim stringNumber As String = TryCast(o, String)
            Dim number As Integer = 0
            If stringNumber Is Nothing Then
                Return -1
            End If
            If Int32.TryParse(stringNumber, number) Then
                Return number
            End If
            Select Case stringNumber.ToLower()
                Case "one"
                    Return 1
                Case "two"
                    Return 2
                Case "three"
                    Return 3
            End Select
            Return number
        End Function
    End Class
End Namespace

Change Intervals between Major Tick Marks

Use the GridSpacing property to customize intervals between major tickmarks.

The x-axis’s grid spacing is equal to 500 ; the y-axis’s grid spacing is equal to 2000.

The x-axis’s grid spacing is equal to 1000 ; the y-axis’s grid spacing is equal to 1000.

Disable the AutoGrid property before GridSpacing is configured:

• XAML

<dxc:XYDiagram2D.AxisX>
    <dxc:AxisX2D>
        <dxc:AxisX2D.NumericScaleOptions>
            <dxc:ManualNumericScaleOptions AutoGrid="False"
                                           GridSpacing="1000"/>
        </dxc:AxisX2D.NumericScaleOptions>
    </dxc:AxisX2D>
</dxc:XYDiagram2D.AxisX>
<dxc:XYDiagram2D.AxisY>
    <dxc:AxisY2D>
        <dxc:AxisY2D.NumericScaleOptions>
            <dxc:ContinuousNumericScaleOptions AutoGrid="False"                                  
                                               GridSpacing="1000" />
        </dxc:AxisY2D.NumericScaleOptions>
    </dxc:AxisY2D>
</dxc:XYDiagram2D.AxisY>

API members for numeric axes:

|

Member

|

Description

| | --- | --- | |

ManualNumericScaleOptions.GridSpacing

|

Gets or sets the numeric grid step in grid alignment units.

| |

ContinuousNumericScaleOptions.GridSpacing

|

Gets or sets the numeric grid step in grid alignment units.

| |

ManualNumericScaleOptions.AutoGrid

|

Gets or sets a value that specifies whether the spacing of grid lines is calculated automatically based upon the major tickmarks of the axis.

| |

ContinuousNumericScaleOptions.AutoGrid

|

Gets or sets a value that specifies whether the spacing of grid lines is calculated automatically based upon the major tickmarks of the axis.

|

API members for date-time axes:

|

Member

|

Description

| | --- | --- | |

ManualDateTimeScaleOptions.GridSpacing

|

Gets or sets the date-time grid step in grid alignment units.

| |

ContinuousDateTimeScaleOptions.GridSpacing

|

Gets or sets the date-time grid step in grid alignment units.

| |

ManualDateTimeScaleOptions.AutoGrid

|

Gets or sets a value that specifies whether the spacing of grid lines is calculated automatically based upon the major tickmarks of the axis.

| |

ContinuousDateTimeScaleOptions.AutoGrid

|

Gets or sets a value that specifies whether the spacing of grid lines is calculated automatically based upon the major tickmarks of the axis.

|

API members for time-span axes:

|

Member

|

Description

| | --- | --- | |

ManualTimeSpanScaleOptions.GridSpacing

|

Gets or sets a value that specifies the distance between major tickmarks and grid lines.

| |

ContinuousTimeSpanScaleOptions.GridSpacing

|

Gets or sets a value that specifies the distance between major tickmarks and grid lines.

| |

ManualTimeSpanScaleOptions.AutoGrid

|

Gets or sets a value that specifies whether the GridSpacing and GridAlignment property values are automatically calculated.

| |

ContinuousTimeSpanScaleOptions.AutoGrid

|

Gets or sets a value that specifies whether the GridSpacing and GridAlignment property values are automatically calculated.

|

API members for qualitative axes:

|

Member

|

Description

| | --- | --- | |

QualitativeScaleOptions.GridSpacing

|

Gets or sets the interval between grid lines and major tickmarks.

| |

QualitativeScaleOptions.AutoGrid

|

Gets or sets the value specifying whether the alignment, spacing and offset of grid lines and major tickmarks should be calculated automatically.

|

The Chart Control automatically calculates the optimal grid spacing value when an x-axis’s numeric scale options are automatic (AutomaticNumericScaleOptions, AutomaticDateTimeScaleOptions or AutomaticTimeSpanScaleOptions).

Grid Alignment vs Grid Spacing

You can use the GridAlignment and GridSpacing properties to create the chart’s grid step.

For date-time and time-span axes, you may need to fine-tune the axis label display format via the AxisLabel.TextPattern property since the GridAlignment value affects the axis label format. For example, axis labels show months if GridAlignment is set to Month.

Option #1: GridSpacing = 1; GridAlignment = Year (for the x-axis)

Option #2 : GridSpacing = 12; GridAlignment = Month; AxisLabel.TextPattern = “{A:yyyy}” (for the x-axis)

Result:

For numeric axes, you can use the GridAlignment property instead of GridSpacing to configure the chart’s grid step. If you use the GridAlignment and GridSpacing properties simultaneously, their values are multiplied and the result defines the grid step.

Option #1: GridSpacing = 1; GridAlignment = 500 (for the x-axis)

Option #2 : GridSpacing = 500; GridAlignment = 1 (for the x-axis)

Result:

Customize Layout of Grid Lines and Axis Labels

Use the GridLayoutMode (DateTimeScaleOptionsBase.GridLayoutMode, IntervalNumericScaleOptions.GridLayoutMode, QualitativeScaleOptions.GridLayoutMode or TimeSpanScaleOptionsBase.GridLayoutMode) property to rearrange grid lines, labels, and tickmarks.

A grid line, major tickmark, and axis label are in an interval center.

A grid line, major tickmark, and axis label are shifted to an interval start value.

A grid line and major tickmark are shifted to an interval start value. An axis label is in the interval center.

• XAML

<dxc:XYDiagram2D.AxisX>
    <dxc:AxisX2D TickmarksMinorVisible="False" GridLinesVisible="True">
        <dxc:AxisX2D.DateTimeScaleOptions>
            <dxc:ManualDateTimeScaleOptions GridLayoutMode="GridAndLabelShifted"/>
        </dxc:AxisX2D.DateTimeScaleOptions>
    </dxc:AxisX2D>
</dxc:XYDiagram2D.AxisX>

See Also

Data Aggregation