Axis Scale Types

  • 13 min 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.

This document consists of the following sections:

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 make the Chart process arguments/values as numbers, set the Series.ArgumentScaleType/Series.ValueScaleType property to ScaleType.Numerical.

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

To configure a numeric x-axis's 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's 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.

A y-axis can only have a continuous scale. To change a numeric y-axis's 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

19.2 Demo Center: Launch the Logarithmic Scale demo

Requires a WPF Subscription. Download

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

<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

19.2 Demo Center: Launch the Date-Time Scale demo

Requires a WPF Subscription. Download

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

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

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:

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

Disable the AutoGrid property before GridAlignment is configured:

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

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

Disable the AutoGrid property before GridAlignment is configured:

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

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

    WPF_QualitativeAxisCase1

  • Series overlap when one series uses a secondary axis:

    WPF_QualitativeAxisCase2

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

    WPF_QualitativeAxisCase3

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

    WPF_QualitativeAxisCase4

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.

<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

You can assign an object that implements the IComparer interface to the AxisBase.QualitativeScaleComparer property to specify qualitative values' sorting order.

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>

Change Intervals between Major Tick Marks

Use the GridSpacing property to customize intervals between major tickmarks.

Disable the AutoGrid property before GridSpacing is configured:

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

<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