Tickmarks, Grid Lines, and Interlacing

• May 28, 2021
• 4 minutes to read

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:

• How to Configure Tickmarks Appearance
• How to Customize Grid Lines Appearance
• How to Make a Diagram Interlaced
• How to Customize the Grid Lines and Tickmarks’ Layout

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:

XAML

<dxc:XYDiagram2D.AxisX>
      <dxc:AxisX2D Brush="DarkGray"
                   TickmarksCrossAxis="True"
                   TickmarksLength="7"
                   TickmarksMinorLength="3" 
                   TickmarksThickness="1"
                   TickmarksMinorThickness="1"  
                   TickmarksVisible="True" 
                   TickmarksMinorVisible="True"  
                   MinorCount="6">
            <!--...-->
      </dxc:AxisX2D>                       
</dxc:XYDiagram2D.AxisX>

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

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:

XAML

<dxc:XYDiagram2D.AxisY>
      <dxc:AxisY2D GridLinesBrush="DarkGray" 
                   GridLinesMinorBrush="Gray"
                   GridLinesMinorVisible="True" 
                   GridLinesVisible="True">
            <dxc:AxisY2D.GridLinesLineStyle>
                  <dxc:LineStyle Thickness="2">
                        <dxc:LineStyle.DashStyle>
                              <DashStyle Dashes="1 3 1"/>
                        </dxc:LineStyle.DashStyle>
                  </dxc:LineStyle>                             
            </dxc:AxisY2D.GridLinesLineStyle>
            <dxc:AxisY2D.GridLinesMinorLineStyle>
                  <dxc:LineStyle Thickness="1">
                        <dxc:LineStyle.DashStyle>
                              <DashStyle Dashes="2 4 2"/>
                        </dxc:LineStyle.DashStyle>
                  </dxc:LineStyle>
            </dxc:AxisY2D.GridLinesMinorLineStyle>
      </dxc:AxisY2D>
</dxc:XYDiagram2D.AxisY>

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.

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:

XAML

<dxc:XYDiagram2D.AxisX>
       <dxc:AxisX2D Interlaced="True" 
                    InterlacedBrush="#11000000">
                    <!--...-->
       </dxc:AxisX2D>
</dxc:XYDiagram2D.AxisX>
<dxc:XYDiagram2D.AxisY>
       <dxc:AxisY2D InterlacedBrush="#11000000" 
                    GridLinesVisible="False">
                    <!--...-->
       </dxc:AxisY2D>
</dxc:XYDiagram2D.AxisY>

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.

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:

XAML

<dxc:XYDiagram2D.AxisY>
      <dxc:AxisY2D>
            <dxc:AxisY2D.NumericScaleOptions>
                  <dxc:ContinuousNumericScaleOptions AutoGrid="False" 
                                                     GridSpacing="200" 
                                                     GridOffset="-100"/>
            </dxc:AxisY2D.NumericScaleOptions>
      </dxc:AxisY2D>
</dxc:XYDiagram2D.AxisY>

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.