[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Collapse]Chart Control
    [Expand]Getting Started
    [Expand]Providing Data
    [Collapse]Chart Elements
       Primary and Secondary Axes
       Axis Scale Types
       Whole and Visual Ranges
       Axis Layout and Appearance
       Axis Labels
       Axis Titles
       Constant Lines
       Scale Breaks
       Tickmarks, Grid Lines, and Interlacing
      Chart Titles
    [Expand]Appearance Customization
    [Expand]End-User Features
    [Expand]Design-Time Features
    [Expand]Additional Resources
   [Expand]Chart3D Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Tickmarks, Grid Lines, and Interlacing

Chart axes allow you to modify their x- and y-axis tickmark and grid line options. You can also change the color of the interlaced color intervals on the diagram's surface.

This topic consists of the following sections:

Expanded How to Configure Tickmarks Appearance

You can modify major and minor x- or y-axis tickmarks according to your needs, for example, a tickmark's length or thickness.

The following markup shows how to customize the minor and major x-axis tickmarks:

The markup above uses the following properties:

Property Description
Axis2D.TickmarksCrossAxis Specifies whether to draw tickmarks over an axis.
Axis2D.TickmarksLength Specifies major tickmarks' length.
Axis2D.TickmarksMinorLength Specifies minor tickmarks' length.
Axis2D.TickmarksThickness Specifies major tickmarks' thickness.
Axis2D.TickmarksMinorThickness Specifies minor tickmarks' thickness.
Axis2D.TickmarksVisible Specifies whether to show major tickmarks.
Axis2D.TickmarksMinorVisible Specifies whether to show minor tickmarks.
AxisBase.MinorCount Specifies the number of minor tickmarks (grid lines) between two major tickmarks (grid lines).

Expanded How to Customize Grid Lines

You can customize the major and minor x- and y-axes' grid line appearance parameters (for example, color or thickness).

Use the following markup to configure a y-axis's major and minor grid lines:

The code above uses the following properties:

Property Description
AxisBase.GridLinesLineStyle Specifies the line style settings for the axis' grid lines.
AxisBase.GridLinesMinorLineStyle Specifies the line style settings for the axis' minor grid lines.
AxisBase.GridLinesBrush Gets or sets the axis' grid line color.
AxisBase.GridLinesMinorBrush Specifies the axis' minor grid line color.
AxisBase.GridLinesVisible Specifies whether to show axis grid lines.
AxisBase.GridLinesMinorVisible Specifies whether the axis minor grid lines are visible.

Expanded How to Make a Diagram Interlaced

The Chart control has a feature that makes a diagram's background striped by alternating two colors. Interlacing is enabled for the y-axis, by default. You can enable interlacing for the x-axis too.

Use the following markup to enable interlacing for an x-axis and configure the interlacing brushes for both axes:

The code above uses the following properties:

Property Description
AxisBase.Interlaced Specifies whether to enable interlacing for an axis.
AxisBase.InterlacedBrush Specifies a brush used to paint the diagram surface.

Expanded How to Customize the Grid Lines and Tickmarks' Layout

The distance between major tickmarks and grid lines depend on the value assigned to the GridSpacing property. This property specifies the interval between major axis tickmarks and grid lines and is expressed in axis measurement units.

The following markup specifies the y-axis's scale options:

The markup above uses the following classes and properties:

Class or Property Description
AxisX2D.NumericScaleOptions Provides access to the options that define the behavior of a numeric X-scale when it is in manual, automatic or continuous mode.
ContinuousNumericScaleOptions Contains settings for numeric axis data when its scale mode is continuous.
ContinuousNumericScaleOptions.AutoGrid Gets or sets a value that specifies whether the spacing of grid lines is calculated automatically based on the axis's major tickmarks.
ContinuousNumericScaleOptions.GridSpacing Gets or sets the numeric grid step in axis measurement units.
ContinuousNumericScaleOptions.GridOffset Gets or sets the grid line offset.

Expanded See Also

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