# Axis Scale Types | WPF Controls | DevExpress Documentation

This topic explains how to specify axis scale options for different [types of series point arguments and values](/WPF/8453/controls-and-libraries/charts-suite/chart-control/provide-data/series-scale-types) (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](/WPF/16846/controls-and-libraries/charts-suite/chart-control/data-aggregation) function.

![Numeric x-axis](/WPF/images/chart-control/axis-scale-types--numeric.png)Numeric x-axis

![DateTime x-axis](/WPF/images/chart-control/axis-scale-types--date-time.png)DateTime x-axis

![TimeSpan x-axis](/WPF/images/chart-control/axis-scale-types--time-span.png)TimeSpan x-axis

![Qualitative x-axis](/WPF/images/chart-control/axis-scale-types--qualitative.png)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](https://docs.microsoft.com/en-us/dotnet/standard/datetime/choosing-between-datetime) document (see the [The DateTime structure](https://docs.microsoft.com/en-us/dotnet/standard/datetime/choosing-between-datetime#the-datetime-structure) and [The TimeSpan structure](https://docs.microsoft.com/en-us/dotnet/standard/datetime/choosing-between-datetime#the-timespan-structure) sections).
2. To format [text labels](/WPF/6336/controls-and-libraries/charts-suite/chart-control/axes/axis-labels) the Chart displays on an axis, use the [AxisLabel.TextPattern](/WPF/DevExpress.Xpf.Charts.AxisLabel.TextPattern) property.
3. You can configure [whole and visual ranges](/WPF/115158/controls-and-libraries/charts-suite/chart-control/axes/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](/WPF/DevExpress.Xpf.Charts.Series.ArgumentScaleType) is set to **Auto**). Note that this operation requires additional CPU and RAM resources. Use the [Series.ArgumentScaleType](/WPF/DevExpress.Xpf.Charts.Series.ArgumentScaleType) to explicitly specify the argument type. See [Best Practices: Display Large Data](/WPF/400482/controls-and-libraries/charts-suite/chart-control/provide-data/best-practices-display-large-data#automatic-calculations) 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](/WPF/DevExpress.Xpf.Charts.Series.ArgumentScaleType)/[Series.ValueScaleType](/WPF/DevExpress.Xpf.Charts.Series.ValueScaleType) property to **ScaleType.Numerical**.

- XAML

<section id="tabpanel_1se7knZjle_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxc:LineSeries2D ArgumentScaleType=&quot;Numerical&quot; ValueScaleType=&quot;Numerical&quot;/&gt;
</code></pre></section>

To configure numeric x-axis options, set its **NumericScaleOptions** ([AxisX2D.NumericScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisX2D.NumericScaleOptions), [AxisX3D.NumericScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisX3D.NumericScaleOptions) or [CircularAxisX2D.NumericScaleOptions](/WPF/DevExpress.Xpf.Charts.CircularAxisX2D.NumericScaleOptions)) property to one of the following objects:

| Options’ Type | Summary |
| --- | --- |
| [AutomaticNumericScaleOptions](/WPF/DevExpress.Xpf.Charts.AutomaticNumericScaleOptions) | When used, automatic [aggregation](/WPF/16846/controls-and-libraries/charts-suite/chart-control/data-aggregation#aggregate-numeric-data) is applied to data based on the data set’s values, the Chart Control’s current size, and zoom level. |
| [ManualNumericScaleOptions](/WPF/DevExpress.Xpf.Charts.ManualNumericScaleOptions) | An axis scale is divided into intervals based on the [measurement unit](/WPF/DevExpress.Xpf.Charts.ManualNumericScaleOptions.MeasureUnit). An [aggregate function](/WPF/16846/controls-and-libraries/charts-suite/chart-control/data-aggregation#aggregate-function) applies to each interval. |
| [ContinuousNumericScaleOptions](/WPF/DevExpress.Xpf.Charts.ContinuousNumericScaleOptions) | The Chart Control does not aggregate data. |
| [IntervalNumericScaleOptions](/WPF/DevExpress.Xpf.Charts.IntervalNumericScaleOptions) | When used, axis labels display intervals, for example, *(100, 200]*, *(200, 300]*. Use the [IntervalNumericScaleOptions.Pattern](/WPF/DevExpress.Xpf.Charts.IntervalNumericScaleOptions.Pattern) property to change the display format for axis labels. These options allow you to create [histograms](/WPF/400974/controls-and-libraries/charts-suite/chart-control/histogram). |

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.](/WPF/images/chart-control/numeric-scale-manual-options.png)ManualNumericScaleOptions are applied to the x-axis.

![Scale options are not defined.](/WPF/images/chart-control/numeric-scale-default-options.png)Scale options are not defined.

- XAML

<section id="tabpanel_1se7knZjle-1_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxc:AxisX2D.NumericScaleOptions&gt;
    &lt;dxc:ManualNumericScaleOptions AggregateFunction=&quot;Average&quot; 
                                   MeasureUnit=&quot;100&quot;/&gt;
&lt;/dxc:AxisX2D.NumericScaleOptions&gt;
</code></pre></section>

A y-axis can only have a continuous scale. To change numeric y-axis options, set its **NumericScaleOptions** ([AxisY2D.NumericScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisY2D.NumericScaleOptions), [AxisY3D.NumericScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisY3D.NumericScaleOptions) or [CircularAxisY2D.NumericScaleOptions](/WPF/DevExpress.Xpf.Charts.CircularAxisY2D.NumericScaleOptions)) to a [ContinuousTimeSpanScaleOptions](/WPF/DevExpress.Xpf.Charts.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

**26.1 Demo Center:** [Launch the Logarithmic Scale demo](dxdemo://Wpf/DXCharts/MainDemo/LogarithmicScaleDemo)

![A logarithmic scale is enabled for the y-axis.](/WPF/images/wpf_logarithmictrue120980.png)A logarithmic scale is enabled for the y-axis.

![A logarithmic scale is disabled.](/WPF/images/wpf_logarithmicfalse120979.png)A logarithmic scale is disabled.

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

- XAML

<section id="tabpanel_1se7knZjle-2_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxc:XYDiagram2D.AxisY&gt;
    &lt;dxc:AxisY2D Logarithmic=&quot;True&quot; 
                 LogarithmicBase=&quot;10&quot;/&gt;
&lt;/dxc:XYDiagram2D.AxisY&gt;
</code></pre></section>

The example above uses the following API members:

| Property | Description |
| --- | --- |
| [Axis.Logarithmic](/WPF/DevExpress.Xpf.Charts.Axis.Logarithmic) | Gets or sets whether the axis should use a logarithmic scale to display numeric values. |
| [Axis.LogarithmicBase](/WPF/DevExpress.Xpf.Charts.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](https://learn.microsoft.com/dotnet/api/system.datetime) values, for example, **01/01/2017 18:00 AM**, **November 10**, etc.

Note

**26.1 Demo Center:** [Launch the Date-Time Scale demo](dxdemo://Wpf/DXCharts/MainDemo/DateTimeScaleDemo)

To make the Chart process arguments/values as date-time values, set [Series.ArgumentScaleType](/WPF/DevExpress.Xpf.Charts.Series.ArgumentScaleType)/[Series.ValueScaleType](/WPF/DevExpress.Xpf.Charts.Series.ValueScaleType) property to **ScaleType.DateTime**.

- XAML

<section id="tabpanel_1se7knZjle-3_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxc:LineSeries2D ArgumentScaleType=&quot;DateTime&quot; ValueScaleType=&quot;Numerical&quot;/&gt;
</code></pre></section>

To configure a date-time x-axis’s options, set its **DateTimeScaleOptions** ([AxisX2D.DateTimeScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisX2D.DateTimeScaleOptions), [AxisX3D.DateTimeScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisX3D.DateTimeScaleOptions) or [RadarAxisX2D.DateTimeScaleOptions](/WPF/DevExpress.Xpf.Charts.RadarAxisX2D.DateTimeScaleOptions)) property to one of the following objects:

| Options’ Type | Summary |
| --- | --- |
| [AutomaticDateTimeScaleOptions](/WPF/DevExpress.Xpf.Charts.AutomaticDateTimeScaleOptions) | When used, automatic [aggregation](/WPF/16846/controls-and-libraries/charts-suite/chart-control/data-aggregation#aggregate-date-time-data) is applied to data based on the data set’s values, the Chart Control’s current size, and zoom level. |
| [ManualDateTimeScaleOptions](/WPF/DevExpress.Xpf.Charts.ManualDateTimeScaleOptions) | An axis scale is divided into intervals that the [measurement unit](/WPF/DevExpress.Xpf.Charts.ManualDateTimeScaleOptions.MeasureUnit) specifies. An [aggregate function](/WPF/16846/controls-and-libraries/charts-suite/chart-control/data-aggregation#aggregate-function) applies to each interval. |
| [ContinuousDateTimeScaleOptions](/WPF/DevExpress.Xpf.Charts.ContinuousDateTimeScaleOptions) | The Chart Control’s does not aggregate data. |
| [IntervalDateTimeScaleOptions](/WPF/DevExpress.Xpf.Charts.IntervalDateTimeScaleOptions) | When used, axis labels display intervals, for example, *(15/01, 15/02]*, *(15/02, 15/03]*. Use the [IntervalDateTimeScaleOptions.Pattern](/WPF/DevExpress.Xpf.Charts.IntervalDateTimeScaleOptions.Pattern) property to change the display format for axis labels. These options allow you to create [histograms](/WPF/400974/controls-and-libraries/charts-suite/chart-control/histogram). |

A y-axis can only have a continuous scale. To change a date-time y-axis’s options, set its **DateTimeScaleOptions** ([AxisY2D.DateTimeScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisY2D.DateTimeScaleOptions), [AxisY3D.DateTimeScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisY3D.DateTimeScaleOptions) or [CircularAxisY2D.DateTimeScaleOptions](/WPF/DevExpress.Xpf.Charts.CircularAxisY2D.DateTimeScaleOptions)) to a [ContinuousDateTimeScaleOptions](/WPF/DevExpress.Xpf.Charts.ContinuousDateTimeScaleOptions) object.

Tip

You can [exclude holidays, weekends or particular hours](/WPF/116192/controls-and-libraries/charts-suite/chart-control/provide-data/work-time-and-workday-configuration) from a date-time axis’s scale.

### Define Measurement Units

The Chart Control divides an axis scale into day intervals if the [measurement unit](/WPF/DevExpress.Xpf.Charts.ManualDateTimeScaleOptions.MeasureUnit) 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](/WPF/16846/controls-and-libraries/charts-suite/chart-control/data-aggregation#aggregate-date-time-data) into one point (for example, data points in the same month).

![MeasureUnit = Day (default)](/WPF/images/chart-control/scale-types/understanding-measure-unit-day.png)MeasureUnit = Day (default)

![MeasureUnit = Month](/WPF/images/chart-control/scale-types/understanding-measure-unit-month.png)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

<section id="tabpanel_1se7knZjle-4_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxc:XYDiagram2D&gt;
    &lt;dxc:BarSideBySideSeries2D&gt;
        &lt;dxc:SeriesPoint Argument=&quot;2019/01/01&quot; Value=&quot;5&quot;/&gt;
        &lt;dxc:SeriesPoint Argument=&quot;2019/01/02&quot; Value=&quot;6&quot;/&gt;
        &lt;dxc:SeriesPoint Argument=&quot;2019/02/01&quot; Value=&quot;6&quot;/&gt;
        &lt;dxc:SeriesPoint Argument=&quot;2019/03/01&quot; Value=&quot;7&quot;/&gt;
    &lt;/dxc:BarSideBySideSeries2D&gt;
    &lt;dxc:XYDiagram2D.AxisX&gt;
        &lt;dxc:AxisX2D&gt;
            &lt;dxc:AxisX2D.DateTimeScaleOptions&gt;
                &lt;dxc:ManualDateTimeScaleOptions MeasureUnit=&quot;Month&quot;/&gt;
            &lt;/dxc:AxisX2D.DateTimeScaleOptions&gt;
        &lt;/dxc:AxisX2D&gt;
    &lt;/dxc:XYDiagram2D.AxisX&gt;
&lt;/dxc:XYDiagram2D&gt;
</code></pre></section>

### 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&#39;s alignment is set to **Year**.](/WPF/images/chart-control/scale-types/datetime-gridalignment-year.png)The date-time x-axis’s alignment is set to **Year**.

![The date-time x-axis&#39;s alignment is set to **Month**.](/WPF/images/chart-control/scale-types/datetime-gridalignment-month.png)The date-time x-axis’s alignment is set to **Month**.

Disable the **AutoGrid** property before **GridAlignment** is configured:

- XAML

<section id="tabpanel_1se7knZjle-5_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxc:XYDiagram2D.AxisX&gt;
    &lt;dxc:AxisX2D&gt;
        &lt;dxc:AxisX2D.DateTimeScaleOptions&gt;
            &lt;dxc:ManualDateTimeScaleOptions AutoGrid=&quot;False&quot; GridAlignment=&quot;Year&quot;/&gt;
        &lt;/dxc:AxisX2D.DateTimeScaleOptions&gt;
    &lt;/dxc:AxisX2D&gt;
&lt;/dxc:XYDiagram2D.AxisX&gt;
</code></pre></section>

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

| Member | Description |
| --- | --- |
| [ManualDateTimeScaleOptions.GridAlignment](/WPF/DevExpress.Xpf.Charts.ManualDateTimeScaleOptions.GridAlignment) | Gets or sets the date-time measure unit to which the beginning of the [grid lines](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) and [axis labels](/WPF/6336/controls-and-libraries/charts-suite/chart-control/axes/axis-labels) of an axis should be aligned. |
| [ContinuousDateTimeScaleOptions.GridAlignment](/WPF/DevExpress.Xpf.Charts.ContinuousDateTimeScaleOptions.GridSpacing) | Gets or sets the date-time measure unit to which the beginning of the [grid lines](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) and [axis labels](/WPF/6336/controls-and-libraries/charts-suite/chart-control/axes/axis-labels) of an axis should be aligned. |
| [DateTimeGridAlignment](/WPF/DevExpress.Xpf.Charts.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](/WPF/DevExpress.Xpf.Charts.ManualDateTimeScaleOptions.AutoGrid) | Gets or sets a value that specifies whether the spacing of [grid lines](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) is calculated automatically based upon the major [tickmarks](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) of the axis. |
| [ContinuousDateTimeScaleOptions.AutoGrid](/WPF/DevExpress.Xpf.Charts.ContinuousDateTimeScaleOptions.AutoGrid) | Gets or sets a value that specifies whether the spacing of [grid lines](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) is calculated automatically based upon the major [tickmarks](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) 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](/WPF/DevExpress.Xpf.Charts.AutomaticDateTimeScaleOptions).

## Handle an Axis with a Time-Span Scale

You can set the [Series.ArgumentScaleType](/WPF/DevExpress.Xpf.Charts.Series.ArgumentScaleType)/[Series.ValueScaleType](/WPF/DevExpress.Xpf.Charts.Series.ValueScaleType) property to **ScaleType.TimeSpan** to process arguments or values associated with a time-span axis as [TimeSpan](https://learn.microsoft.com/dotnet/api/system.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](/WPF/DevExpress.Xpf.Charts.Series.ArgumentScaleType)/[Series.ValueScaleType](/WPF/DevExpress.Xpf.Charts.Series.ValueScaleType) property to **ScaleType.TimeSpan**.

- XAML

<section id="tabpanel_1se7knZjle-6_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxc:LineSeries2D ArgumentScaleType=&quot;TimeSpan&quot; ValueScaleType=&quot;TimeSpan&quot;/&gt;
</code></pre></section>

To configure a time-span x-axis’s options, set its **TimeSpanScaleOptions** ([AxisX2D.TimeSpanScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisX2D.TimeSpanScaleOptions), [AxisX3D.TimeSpanScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisX3D.TimeSpanScaleOptions) or [RadarAxisX2D.TimeSpanScaleOptions](/WPF/DevExpress.Xpf.Charts.RadarAxisX2D.TimeSpanScaleOptions)) property to one of the following objects:

| Options’ type | Summary |
| --- | --- |
| [AutomaticTimeSpanScaleOptions](/WPF/DevExpress.Xpf.Charts.AutomaticTimeSpanScaleOptions) | When used, automatic [aggregation](/WPF/16846/controls-and-libraries/charts-suite/chart-control/data-aggregation#aggregate-time-span-data) is applied to data based on the data set’s values, the Chart Control’s current size, and zoom level. |
| [ManualTimeSpanScaleOptions](/WPF/DevExpress.Xpf.Charts.ManualTimeSpanScaleOptions) | An axis scale is divided into intervals that the [measurement unit](/WPF/DevExpress.Xpf.Charts.ManualTimeSpanScaleOptions.MeasureUnit) specifies. An [aggregate function](/WPF/16846/controls-and-libraries/charts-suite/chart-control/data-aggregation#aggregate-function) applies to each interval. |
| [ContinuousTimeSpanScaleOptions](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions) | The Chart Control’s does not aggregate data. |
| [IntervalTimeSpanScaleOptions](/WPF/DevExpress.Xpf.Charts.IntervalTimeSpanScaleOptions) | When used, axis labels display intervals, for example, *(1.00:00:00, 2.12:00:00]*. Use the [IntervalTimeSpanScaleOptions.Pattern](/WPF/DevExpress.Xpf.Charts.IntervalTimeSpanScaleOptions.Pattern) property to change the display format for axis labels. These options allow you to create [histograms](/WPF/400974/controls-and-libraries/charts-suite/chart-control/histogram). |

A y-axis can only have a continuous scale. To change a time-span y-axis’s options, set its **TimeSpanScaleOptions** ([AxisY2D.TimeSpanScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisY2D.TimeSpanScaleOptions), [AxisY3D.TimeSpanScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisY3D.TimeSpanScaleOptions) or [CircularAxisY2D.TimeSpanScaleOptions](/WPF/DevExpress.Xpf.Charts.CircularAxisY2D.TimeSpanScaleOptions)) to a [ContinuousTimeSpanScaleOptions](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions) object.

Tip

Time-span x-axes support [data aggregation](/WPF/16846/controls-and-libraries/charts-suite/chart-control/data-aggregation#aggregate-time-span-data).

### 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&#39;s alignment is set to **Hour**.](/WPF/images/chart-control/scale-types/timespan-alignment-hour.png)The  x-axis’s alignment is set to **Hour**.

![The  x-axis&#39;s alignment is set to **Day**.](/WPF/images/chart-control/scale-types/timespan-alignment-day.png)The  x-axis’s alignment is set to **Day**.

Disable the **AutoGrid** property before **GridAlignment** is configured:

- XAML

<section id="tabpanel_1se7knZjle-7_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxc:XYDiagram2D.AxisX&gt;
    &lt;dxc:AxisX2D&gt;
        &lt;dxc:AxisX2D.TimeSpanScaleOptions&gt;
            &lt;dxc:ManualTimeSpanScaleOptions AutoGrid=&quot;False&quot; GridAlignment=&quot;Hour&quot;/&gt;
        &lt;/dxc:AxisX2D.TimeSpanScaleOptions&gt;                          
    &lt;/dxc:AxisX2D&gt;
&lt;/dxc:XYDiagram2D.AxisX&gt;
</code></pre></section>

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

| Member | Description |
| --- | --- |
| [ManualTimeSpanScaleOptions.GridAlignment](/WPF/DevExpress.Xpf.Charts.ManualTimeSpanScaleOptions.GridAlignment) | Gets or sets the time-span measurement unit that defines the alignment of [grid lines](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) and [axis labels](/WPF/6336/controls-and-libraries/charts-suite/chart-control/axes/axis-labels). |
| [ContinuousTimeSpanScaleOptions.GridAlignment](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions.GridSpacing) | Gets or sets the time-span measurement unit that defines the alignment of [grid lines](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) and [axis labels](/WPF/6336/controls-and-libraries/charts-suite/chart-control/axes/axis-labels). |
| [TimeSpanGridAlignment](/WPF/DevExpress.Xpf.Charts.TimeSpanGridAlignment) | Lists the values that specify the time-span measurement unit that is used to align [gridlines](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) and [labels](/WPF/6336/controls-and-libraries/charts-suite/chart-control/axes/axis-labels). |
| [ManualTimeSpanSpanOptions.AutoGrid](/WPF/DevExpress.Xpf.Charts.ManualTimeSpanScaleOptions.AutoGrid) | Gets or sets a value that specifies whether the [GridSpacing](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions.GridSpacing) and [GridAlignment](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions.GridAlignment) property values are automatically calculated. |
| [ContinuousTimeSpanScaleOptions.AutoGrid](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions.AutoGrid) | Gets or sets a value that specifies whether the [GridSpacing](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions.GridSpacing) and [GridAlignment](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions.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](/WPF/DevExpress.Xpf.Charts.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](/WPF/DevExpress.Xpf.Charts.Series.ArgumentScaleType) property to **ScaleType.Qualitative**.

- XAML

<section id="tabpanel_1se7knZjle-8_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxc:LineSeries2D ArgumentScaleType=&quot;Qualitative&quot; ValueScaleType=&quot;Numerical&quot;/&gt;
</code></pre></section>

To change a qualitative x-axis options, set its **QualitativeScaleOptions** ([AxisX2D.QualitativeScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisX2D.QualitativeScaleOptions), [AxisX3D.QualitativeScaleOptions](/WPF/DevExpress.Xpf.Charts.AxisX3D.QualitativeScaleOptions) or [RadarAxisX2D.QualitativeScaleOptions](/WPF/DevExpress.Xpf.Charts.RadarAxisX2D.QualitativeScaleOptions) to a [QualitativeScaleOptions](/WPF/DevExpress.Xpf.Charts.QualitativeScaleOptions) object.

Tip

Qualitative x-axes support [data aggregation](/WPF/16846/controls-and-libraries/charts-suite/chart-control/data-aggregation#aggregate-qualitative-data).

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](/WPF/images/wpf_qualitativeaxiscase1120986.png)
- Series overlap when one series uses a  [secondary axis](/WPF/7845/controls-and-libraries/charts-suite/chart-control/axes/primary-and-secondary-axes):

      ![WPF_QualitativeAxisCase2](/WPF/images/wpf_qualitativeaxiscase2120987.png)
- You can plot a series in a [separate pane](/WPF/10631/controls-and-libraries/charts-suite/chart-control/panes/panes) to resolve overlapping series:

      ![WPF_QualitativeAxisCase3](/WPF/images/wpf_qualitativeaxiscase3120988.png)
- Different series’ points are grouped by equal string arguments:

      ![WPF_QualitativeAxisCase4](/WPF/images/wpf_qualitativeaxiscase4120989.png)

### 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](/WPF/DevExpress.Xpf.Charts.QualitativeScaleOptions.AutoGrid), set [QualitativeScaleOptions.GridSpacing](/WPF/DevExpress.Xpf.Charts.QualitativeScaleOptions.GridSpacing) to **1**, and change the [Resolve Overlapping Algorithm options](/WPF/DevExpress.Xpf.Charts.AxisLabelResolveOverlappingOptions) to show all the string arguments for the data series.

- XAML

<section id="tabpanel_1se7knZjle-9_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxc:XYDiagram2D.AxisX&gt;
    &lt;dxc:AxisX2D&gt;
        &lt;dxc:AxisX2D.QualitativeScaleOptions&gt;
            &lt;dxc:QualitativeScaleOptions AutoGrid=&quot;False&quot; GridSpacing=&quot;1&quot;/&gt;
        &lt;/dxc:AxisX2D.QualitativeScaleOptions&gt;
        &lt;dxc:AxisX2D.Label&gt;
            &lt;dxc:AxisLabel&gt;
                &lt;dxc:Axis2D.ResolveOverlappingOptions&gt;
                    &lt;dxc:AxisLabelResolveOverlappingOptions AllowHide=&quot;False&quot; 
                                                            AllowRotate=&quot;True&quot; 
                                                            AllowStagger=&quot;True&quot;/&gt;
                &lt;/dxc:Axis2D.ResolveOverlappingOptions&gt;
            &lt;/dxc:AxisLabel&gt;
        &lt;/dxc:AxisX2D.Label&gt;
    &lt;/dxc:AxisX2D&gt;
&lt;/dxc:XYDiagram2D.AxisX&gt;
</code></pre></section>

See the [Axis Labels: How to Resolve Axis Label Overlapping](/WPF/6336/controls-and-libraries/charts-suite/chart-control/axes/axis-labels#resolve-axis-label-overlap) section for more information.

### How to Sort Qualitative Axis Values

To do this, assign an object that implements the [IComparer](https://learn.microsoft.com/dotnet/api/system.collections.icomparer) interface to the [AxisBase.QualitativeScaleComparer](/WPF/DevExpress.Xpf.Charts.AxisBase.QualitativeScaleComparer) property to specify a custom qualitative scale value order.

- MainWindow.xaml
- NumberComparer.cs
- NumberComparer.vb

<section id="tabpanel_1se7knZjle-10_tabid-xamlMainWindow-xaml" role="tabpanel" data-tab="tabid-xamlMainWindow-xaml">
<pre><code class="lang-xaml">&lt;dxc:XYDiagram2D.AxisX&gt;
    &lt;dxc:AxisX2D&gt;
        &lt;dxc:AxisX2D.QualitativeScaleComparer&gt;
            &lt;local:NumberComparer/&gt;
        &lt;/dxc:AxisX2D.QualitativeScaleComparer&gt;
    &lt;/dxc:AxisX2D&gt;
&lt;/dxc:XYDiagram2D.AxisX&gt;
</code></pre></section>
<section id="tabpanel_1se7knZjle-10_tabid-csharpNumberComparer-cs" role="tabpanel" data-tab="tabid-csharpNumberComparer-cs" aria-hidden="true" hidden="hidden">
<pre><code data-code-links="{&quot;/ (System)(?:;|$)/&quot;:&quot;https://learn.microsoft.com/dotnet/api/system&quot;,&quot;/ (System.Collections)(?:;|$)/&quot;:&quot;https://learn.microsoft.com/dotnet/api/system.collections&quot;}" class="lang-csharp">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 &quot;one&quot;: return 1;
                case &quot;two&quot;: return 2;
                case &quot;three&quot;: return 3;
            }
            return number;
        }
    }
}
</code></pre></section>
<section id="tabpanel_1se7knZjle-10_tabid-vbNumberComparer-vb" role="tabpanel" data-tab="tabid-vbNumberComparer-vb" aria-hidden="true" hidden="hidden">
<pre><code data-code-links="{&quot;/ (System)(?:;|$)/&quot;:&quot;https://learn.microsoft.com/dotnet/api/system&quot;,&quot;/ (System.Collections)(?:;|$)/&quot;:&quot;https://learn.microsoft.com/dotnet/api/system.collections&quot;}" class="lang-vb">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 &quot;one&quot;
                    Return 1
                Case &quot;two&quot;
                    Return 2
                Case &quot;three&quot;
                    Return 3
            End Select
            Return number
        End Function
    End Class
End Namespace
</code></pre></section>

## Change Intervals between Major Tick Marks

Use the **GridSpacing** property to customize intervals between major tickmarks.

![The x-axis&#39;s grid spacing is equal to **500**; the y-axis&#39;s grid spacing is equal to **2000**.](/WPF/images/chart-control/scale-types/numeric-grid-spacing-500.png)The x-axis’s grid spacing is equal to **500**; the y-axis’s grid spacing is equal to **2000**.

![The x-axis&#39;s grid spacing is equal to **1000**; the y-axis&#39;s grid spacing is equal to **1000**.](/WPF/images/chart-control/scale-types/numeric-grid-spacing-1000.png)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

<section id="tabpanel_1se7knZjle-11_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxc:XYDiagram2D.AxisX&gt;
    &lt;dxc:AxisX2D&gt;
        &lt;dxc:AxisX2D.NumericScaleOptions&gt;
            &lt;dxc:ManualNumericScaleOptions AutoGrid=&quot;False&quot;
                                           GridSpacing=&quot;1000&quot;/&gt;
        &lt;/dxc:AxisX2D.NumericScaleOptions&gt;
    &lt;/dxc:AxisX2D&gt;
&lt;/dxc:XYDiagram2D.AxisX&gt;
&lt;dxc:XYDiagram2D.AxisY&gt;
    &lt;dxc:AxisY2D&gt;
        &lt;dxc:AxisY2D.NumericScaleOptions&gt;
            &lt;dxc:ContinuousNumericScaleOptions AutoGrid=&quot;False&quot;                                  
                                               GridSpacing=&quot;1000&quot; /&gt;
        &lt;/dxc:AxisY2D.NumericScaleOptions&gt;
    &lt;/dxc:AxisY2D&gt;
&lt;/dxc:XYDiagram2D.AxisY&gt;
</code></pre></section>

**API members for numeric axes:**

| Member | Description |
| --- | --- |
| [ManualNumericScaleOptions.GridSpacing](/WPF/DevExpress.Xpf.Charts.ManualNumericScaleOptions.GridSpacing) | Gets or sets the numeric grid step in grid alignment units. |
| [ContinuousNumericScaleOptions.GridSpacing](/WPF/DevExpress.Xpf.Charts.ContinuousNumericScaleOptions.GridSpacing) | Gets or sets the numeric grid step in grid alignment units. |
| [ManualNumericScaleOptions.AutoGrid](/WPF/DevExpress.Xpf.Charts.ManualNumericScaleOptions.AutoGrid) | Gets or sets a value that specifies whether the spacing of [grid lines](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) is calculated automatically based upon the major [tickmarks](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) of the axis. |
| [ContinuousNumericScaleOptions.AutoGrid](/WPF/DevExpress.Xpf.Charts.ContinuousNumericScaleOptions.AutoGrid) | Gets or sets a value that specifies whether the spacing of [grid lines](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) is calculated automatically based upon the major [tickmarks](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) of the axis. |

**API members for date-time axes:**

| Member | Description |
| --- | --- |
| [ManualDateTimeScaleOptions.GridSpacing](/WPF/DevExpress.Xpf.Charts.ManualDateTimeScaleOptions.GridSpacing) | Gets or sets the date-time grid step in grid alignment units. |
| [ContinuousDateTimeScaleOptions.GridSpacing](/WPF/DevExpress.Xpf.Charts.ContinuousDateTimeScaleOptions.GridSpacing) | Gets or sets the date-time grid step in grid alignment units. |
| [ManualDateTimeScaleOptions.AutoGrid](/WPF/DevExpress.Xpf.Charts.ManualDateTimeScaleOptions.AutoGrid) | Gets or sets a value that specifies whether the spacing of [grid lines](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) is calculated automatically based upon the major [tickmarks](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) of the axis. |
| [ContinuousDateTimeScaleOptions.AutoGrid](/WPF/DevExpress.Xpf.Charts.ContinuousDateTimeScaleOptions.AutoGrid) | Gets or sets a value that specifies whether the spacing of [grid lines](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) is calculated automatically based upon the major [tickmarks](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) of the axis. |

**API members for time-span axes:**

| Member | Description |
| --- | --- |
| [ManualTimeSpanScaleOptions.GridSpacing](/WPF/DevExpress.Xpf.Charts.ManualTimeSpanScaleOptions.GridSpacing) | Gets or sets a value that specifies the distance between major tickmarks and grid lines. |
| [ContinuousTimeSpanScaleOptions.GridSpacing](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions.GridSpacing) | Gets or sets a value that specifies the distance between major tickmarks and grid lines. |
| [ManualTimeSpanScaleOptions.AutoGrid](/WPF/DevExpress.Xpf.Charts.ManualTimeSpanScaleOptions.AutoGrid) | Gets or sets a value that specifies whether the [GridSpacing](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions.GridSpacing) and [GridAlignment](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions.GridAlignment) property values are automatically calculated. |
| [ContinuousTimeSpanScaleOptions.AutoGrid](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions.AutoGrid) | Gets or sets a value that specifies whether the [GridSpacing](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions.GridSpacing) and [GridAlignment](/WPF/DevExpress.Xpf.Charts.ContinuousTimeSpanScaleOptions.GridAlignment) property values are automatically calculated. |

**API members for qualitative axes:**

| Member | Description |
| --- | --- |
| [QualitativeScaleOptions.GridSpacing](/WPF/DevExpress.Xpf.Charts.QualitativeScaleOptions.GridSpacing) | Gets or sets the interval between [grid lines](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) and [major tickmarks](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing). |
| [QualitativeScaleOptions.AutoGrid](/WPF/DevExpress.Xpf.Charts.QualitativeScaleOptions.AutoGrid) | Gets or sets the value specifying whether the alignment, spacing and offset of [grid lines](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) and [major tickmarks](/WPF/6337/controls-and-libraries/charts-suite/chart-control/axes/tickmarks-grid-lines-and-interlacing) 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](/WPF/DevExpress.Xpf.Charts.AutomaticNumericScaleOptions), [AutomaticDateTimeScaleOptions](/WPF/DevExpress.Xpf.Charts.AutomaticDateTimeScaleOptions) or [AutomaticTimeSpanScaleOptions](/WPF/DevExpress.Xpf.Charts.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](/WPF/DevExpress.Xpf.Charts.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:**

![](/WPF/images/chart-control/scale-types/date-time-grid-spacing-grid-alignment.png)

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

![](/WPF/images/chart-control/scale-types/numeric-grid-spacing-500.png)

## Customize Layout of Grid Lines and Axis Labels

Use the **GridLayoutMode** ([DateTimeScaleOptionsBase.GridLayoutMode](/WPF/DevExpress.Xpf.Charts.DateTimeScaleOptionsBase.GridLayoutMode), [IntervalNumericScaleOptions.GridLayoutMode](/WPF/DevExpress.Xpf.Charts.IntervalNumericScaleOptions.GridLayoutMode), [QualitativeScaleOptions.GridLayoutMode](/WPF/DevExpress.Xpf.Charts.QualitativeScaleOptions.GridLayoutMode) or [TimeSpanScaleOptionsBase.GridLayoutMode](/WPF/DevExpress.Xpf.Charts.TimeSpanScaleOptionsBase.GridLayoutMode)) property to rearrange grid lines, labels, and tickmarks.

![A grid line, major tickmark, and axis label are in an interval center.](/WPF/images/chart-control/scale-types/gridlayout-GridAndLabelCentered.png)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.](/WPF/images/chart-control/scale-types/gridlayout-GridAndLabelShifted.png)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.](/WPF/images/chart-control/scale-types/gridlayout-GridShiftedLabelCentered.png)A grid line and major tickmark are shifted to an interval start value. An axis label is in the interval center.

- XAML

<section id="tabpanel_1se7knZjle-12_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxc:XYDiagram2D.AxisX&gt;
    &lt;dxc:AxisX2D TickmarksMinorVisible=&quot;False&quot; GridLinesVisible=&quot;True&quot;&gt;
        &lt;dxc:AxisX2D.DateTimeScaleOptions&gt;
            &lt;dxc:ManualDateTimeScaleOptions GridLayoutMode=&quot;GridAndLabelShifted&quot;/&gt;
        &lt;/dxc:AxisX2D.DateTimeScaleOptions&gt;
    &lt;/dxc:AxisX2D&gt;
&lt;/dxc:XYDiagram2D.AxisX&gt;        
</code></pre></section>

See Also

[Data Aggregation](/WPF/16846/controls-and-libraries/charts-suite/chart-control/data-aggregation)