Skip to main content

Tickmarks, Grid Lines, and Interlacing

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

MajorMinorTickmarksGridLines

This topic consists of the following sections:

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.

WPF_Tickmarks

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

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

WPF_Gridlines

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

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

WPF_Interlaced

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

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

GridSpacing200

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

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