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

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).
To format text labels the Chart displays on an axis, use the AxisLabel.TextPattern property.
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:

Options’ Type	Summary
AutomaticNumericScaleOptions	When used, automatic aggregation is applied to data based on the data set’s values, the Chart Control’s current size, and zoom level.
ManualNumericScaleOptions	An axis scale is divided into intervals based on the measurement unit. An aggregate function applies to each interval.
ContinuousNumericScaleOptions	The Chart Control does not aggregate data.
IntervalNumericScaleOptions	When used, axis labels display intervals, for example, (100, 200], (200, 300]. Use the IntervalNumericScaleOptions.Pattern property to change the display format for axis labels. These options allow you to create histograms.

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

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

Property	Description
Axis.Logarithmic	Gets or sets whether the axis should use a logarithmic scale to display numeric values.
Axis.LogarithmicBase	Gets or sets a value that specifies a logarithmic base when the Logarithmic property is enabled.

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

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

Options’ Type	Summary
AutomaticDateTimeScaleOptions	When used, automatic aggregation is applied to data based on the data set’s values, the Chart Control’s current size, and zoom level.
ManualDateTimeScaleOptions	An axis scale is divided into intervals that the measurement unit specifies. An aggregate function applies to each interval.
ContinuousDateTimeScaleOptions	The Chart Control’s does not aggregate data.
IntervalDateTimeScaleOptions	When used, axis labels display intervals, for example, (15/01, 15/02], (15/02, 15/03]. Use the IntervalDateTimeScaleOptions.Pattern property to change the display format for axis labels. These options allow you to create histograms.

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:

Argument (“yyyy/mm/dd”)	Value
2019/01/01	5
2019/01/02	6
2019/02/01	6
2019/03/01	7

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:

Member	Description
ManualDateTimeScaleOptions.GridAlignment	Gets or sets the date-time measure unit to which the beginning of the grid lines and axis labels of an axis should be aligned.
ContinuousDateTimeScaleOptions.GridAlignment	Gets or sets the date-time measure unit to which the beginning of the grid lines and axis labels of an axis should be aligned.
DateTimeGridAlignment	Lists the values that specify the date-time measurement unit to which the beginning of a diagram’s gridlines and labels should be aligned.
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.

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:

Options’ type	Summary
AutomaticTimeSpanScaleOptions	When used, automatic aggregation is applied to data based on the data set’s values, the Chart Control’s current size, and zoom level.
ManualTimeSpanScaleOptions	An axis scale is divided into intervals that the measurement unit specifies. An aggregate function applies to each interval.
ContinuousTimeSpanScaleOptions	The Chart Control’s does not aggregate data.
IntervalTimeSpanScaleOptions	When used, axis labels display intervals, for example, (1.00:00:00, 2.12:00:00]. Use the IntervalTimeSpanScaleOptions.Pattern property to change the display format for axis labels. These options allow you to create histograms.

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:

Member	Description
ManualTimeSpanScaleOptions.GridAlignment	Gets or sets the time-span measurement unit that defines the alignment of grid lines and axis labels.
ContinuousTimeSpanScaleOptions.GridAlignment	Gets or sets the time-span measurement unit that defines the alignment of grid lines and axis labels.
TimeSpanGridAlignment	Lists the values that specify the time-span measurement unit that is used to align gridlines and labels.
ManualTimeSpanSpanOptions.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.

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.

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

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Determine X-Axis Scale Type Automatically

Handle an Axis with a Numeric Scale

Display Numeric Values on a Logarithmic Scale

Handle an Axis with a Date-Time Scale

Define Measurement Units

Customize a Date-Time Axis’s Label Display Mode

Handle an Axis with a Time-Span Scale

Customize a Time-Span Axis’s Label Display Mode

Handle an Axis with a Qualitative Scale

Prevent Hiding Axis Labels

How to Sort Qualitative Axis Values

Change Intervals between Major Tick Marks

Grid Alignment vs Grid Spacing

Customize Layout of Grid Lines and Axis Labels