Grid Lines, Tickmarks and Interlacing

  • 5 minutes to read

This topic describes how to use axis grid lines and tickmarks in the ASP.NET Chart Control. In addition, it highlights how a chart's diagram can display interlaced strip lines. Before reading this text, you may wish to review the fundamentals of axes and axis scale types in the WebChartControl.

The topic consists of the following sections.

Grid Line and Tickmark Overview

Tickmarks divide an axis into equal sections by a step whose value is determined by the special options of an axis (such as grid spacing or minor tickmark count). Tickmarks are used to improve the readability of chart data, and may be accompanied by axis labels.

Grid Lines are the reference lines used to improve the readability of a chart's visual data. They are drawn across an axis from its tickmarks through the entire chart.

The following image illustrates the two types of tickmarks and grid lines: major and minor.

GridLinesTickMarks

Besides tickmarks, you can display Interlaced strip lines on a chart's diagram for any of its axes. Use the AxisBase.Interlaced property to show a "ribbed" background with two alternating colors. The default interlaced strip color can be changed from the AxisBase.InterlacedColor property, referenced to its fill style (Axis2D.InterlacedFillStyle).

Axis_Interlaced_True

Note that interlacing does not depend on whether or not axis grid lines or tickmarks are visible. Moreover, interlaced strip lines and grid lines are displayed after the Axis2D.Visibility property is set to false. This scenario is illustrated in the following image.

Interlaced_Strict

Interlacing depends on grid line spacing. It is automatically determined by the ScaleGridOptionsBase.AutoGrid property (the default setting is true) based on the major tickmarks of the axis.

To manually determine the step interval between grid lines, use the ScaleGridOptionsBase.GridSpacing property. Note that if you change the grid line spacing, it affects label placement along the axis. Since ScaleGridOptionsBase.GridSpacing cannot be set to 0, if its value is less than 1 (e.g., 0.1), it is always rounded to 1.

Note that after you assign a value to the ScaleGridOptionsBase.GridSpacing property, the ScaleGridOptionsBase.AutoGrid property is disabled. Also, after you re-enable the ScaleGridOptionsBase.AutoGrid property, the ScaleGridOptionsBase.GridSpacing property is reset.

You can access these properties at design time in the Properties window, after you select the required numeric or date-time scale.

The following images demonstrate the ScaleGridOptionsBase.GridSpacing property applied to the Y-axis.

AutoGrid = true

AutoGrid = false

GridSpacing = 10

GridSpacingAuto_true

GridSpacing_10

Refer to the following sections of this topic to learn how to individually customize tickmarks and grid lines (both major and minor):

Customizing Tickmarks

Expand the Axis2D.Tickmarks property in the Properties window to access the properties of axis tickmarks at design time (see the image below).

TickmarksOptions

You can customize the appearance of major and minor tickmarks from these properties, briefly described below.

The only property that affects both major and minor tickmarks is the TickmarksBase.CrossAxis property, which draws all tickmarks across the axis.

The following properties determine the appearance of major tickmarks only.

The following properties determine the appearance of minor tickmarks only.

In addition, you can use the AxisBase.MinorCount property to manually define the number of minor tickmarks to be shown between each pair of major tickmarks. Note that this property also affects the number of minor grid lines, which is described in the next section of this topic.

The overall number of major tickmarks to be drawn along an axis is determined automatically (along with the number of major grid lines), since the ScaleGridOptionsBase.AutoGrid property is set to true (default). To learn more, refer to the following section of this topic: Grid Line and Tickmark Overview.

Customizing Grid Lines

Expand the AxisBase.GridLines property in the Properties window to access grid line properties at design time (see the image below).

GridLinesOptions

The ASP.NET Chart Control allows you to use the following properties to define the appearance of major and minor grid lines independently.

The following properties determine the appearance of major grid lines only.

The following properties determine the appearance of minor grid lines only.

As with tickmarks, the number of minor grid lines to be displayed between each pair of major gridlines is determined by the AxisBase.MinorCount property. Note that this property affects both minor tickmarks and grid lines.

The overall number of major grid lines to be drawn along an axis is determined automatically (along with the number of major tickmarks), since the ScaleGridOptionsBase.AutoGrid property is set to true (default). To learn more, refer to the following section of this topic: Grid Line and Tickmark Overview.

See Also