[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Collapse]Chart Control
   [Expand]Getting Started
   [Expand]Charting Basics
   [Expand]Series Views
   [Collapse]Chart Elements
     Breadcrumbs
    [Expand]Series
    [Collapse]Diagram
     [Expand]Diagram Types
     [Collapse]Axes
       Axis Scale Types
       Visual Ranges and Whole Ranges
       Primary and Secondary Axes
       Grid Lines, Tickmarks and Interlacing
       Axis Appearance and Position
       Axis Titles
       Axis Labels
       Strips
       Constant Lines
       Scale Breaks
     [Expand]Panes
     Chart Titles
    [Expand]Legends
    [Expand]Annotations
   [Expand]Providing Data
   [Expand]Data Representation
   [Expand]Appearance Customization
   [Expand]End-User Features
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]Examples
   [Expand]Additional Resources
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Axis Scale Types

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, an aggregate function, and so on.

This document consists of the following sections:

Tip

  1. Refer to the Choosing between DateTime, DateTimeOffset, TimeSpan, and TimeZoneInfo document (see the The DateTime structure and The TimeSpan structure sections) for more information about DateTime and TimeSpan values.

  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.

Expanded Determine X-Axis Scale Type Automatically

The Chart Control determines an x-axis's scale type based on underlying data (the SeriesBase.ArgumentScaleType property is set to Auto). Note that this operation requires additional CPU and RAM resources. Use the SeriesBase.ArgumentScaleType property to explicitly specify the argument type. See Performance: Automatic Calculations for more information.

Expanded Numerical, Date-Time and Time-Span Axis Scale Modes

The scale mode (see ScaleOptionsBase.ScaleMode) defines how the Chart aggregates series point values. The following modes are available for x-axes. Y-axes always have a continuous scale.

Scale Mode

Description

Automatic

When used, automatic aggregation is applied to data based on the data set's values, the Chart Control's current size, and zoom level.

Continuous

The Chart Control's does not aggregate data.

Manual

An axis scale is divided into intervals based on the measurement unit (NumericScaleOptions.MeasureUnit, DateTimeScaleOptions.MeasureUnit, or TimeSpanScaleOptions.MeasureUnit). An aggregate function applies to each interval.

Interval

When used, axis labels display intervals, for example, (100, 200], (200, 300]. Use the IntervalOptionsBase.Pattern property to change the display format for axis labels. This mode allows you to create histograms.

Expanded 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 SeriesBase.ArgumentScaleType/SeriesBase.ValueScaleType property to ScaleType.Numerical.

Use the AxisBase.NumericScaleOptions property to access axis scale parameters:

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

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

The example above uses the following API members:

Member Description
AxisBase.Logarithmic Gets or sets whether the axis should display its numerical values using a logarithmic scale.
AxisBase.LogarithmicBase Gets or sets a value specifying a logarithmic base when the Logarithmic property is enabled.

Expanded Handle an Axis with a Date-Time Scale

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

Note

19.2 Demo Center: Launch the Date-Time Scale demo

To make the Chart process arguments/values as numbers, set the SeriesBase.ArgumentScaleType/SeriesBase.ValueScaleType property to ScaleType.DateTime.

Use the AxisBase.DateTimeScaleOptions property to access a date-time axis parameters:

Tip

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

Customize a Date-Time Axis's Label Display Mode

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

Expanded Handle an Axis with a Time-Span Scale

The Chart Control can handle series point arguments/values as TimeSpan (see System.TimeSpan) values, for example, 00:00:00, 00:00:01, 1.12:00:00, etc.

To make the Chart process arguments/values as TimeSpan values, set the SeriesBase.ArgumentScaleType/SeriesBase.ValueScaleType property to ScaleType.TimeSpan.

Use the AxisBase.TimeSpanScaleOptions property to access a time-span axis parameters:

Customize a Time-Span Axis's Label Display Mode

Use the TimeSpanScaleOptions.GridAlignment property to select the date-time unit for axis labels.

Expanded Define Measurement Units for Numerical, Date-Time, and Time-Span Axes

The Chart Control can create large gaps between series points if an incorrect measurement unit is used.

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

To improve the chart's readability, use the MeasureUnit property to 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 following table lists default measurement units for various scale types. To change the measurement unit, use one of the properties below:

Default Measurement Unit Property
Day DateTimeScaleOptions.MeasureUnit
Second TimeSpanScaleOptions.MeasureUnit
Ones NumericScaleOptions.MeasureUnit

The following code shows how to specify the measurement unit for a date-time x-axis:

Expanded 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 the SeriesBase.ArgumentScaleType property to ScaleType.Qualitative.

To change a qualitative x-axis options, use its QualitativeScaleOptions (AxisXBase.QualitativeScaleOptions or AxisX3D.QualitativeScaleOptions).

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. To show all the string arguments for the data series when you use a qualitative scale, disable ScaleGridOptionsBase.AutoGrid, set ScaleGridOptionsBase.GridSpacing to 1, and change the Resolve Overlapping Algorithm options.

Reorder Qualitative Axis Values

You can sort qualitative values to put them in specific order. The images below show the default and custom qualitative value order.

Image Description
The qualitative values are plotted in the same order as series points in the collection.
The custom qualitative value order applies.

Assign an object of a class that implements the System.Collections.IComparer interface to the AxisBase.QualitativeScaleComparer property.

Expanded Change Intervals between Major Tick Marks

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

Expanded Grid Alignment vs Grid Spacing

You can use the GridAlignment and GridSpacing properties to customize the chart's grid step.

For date-time and time-span axes, you can adjust the axis label's display format via the AxisLabel.TextPattern property because the GridAlignment value affects the axis label's 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, the GridAlignment and GridSpacing properties' values are multiplied when they are used simultaneously and the result defines the grid step.

Option #1: GridSpacing = 5; GridAlignment = NumericGridAlignment.Hundreds (for the x-axis)

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

Result:

Expanded Customize Layout of Grid Lines and Axis Labels

Use the GridLayoutMode (DateTimeScaleOptions.GridLayoutMode, NumericIntervalOptions.GridLayoutMode, QualitativeScaleOptions.GridLayoutMode or TimeSpanScaleOptions.GridLayoutMode) property to rearrange grid lines, labels, and tickmarks.

Expanded See Also

Is this topic helpful?​​​​​​​