Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  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]Pivot Grid
  [Expand]Tree List
  [Collapse]Chart Control
   [Expand]Getting Started
   [Collapse]Fundamentals
    [Expand]Charting Basics
    [Expand]Professional Charting
    [Expand]Series Views
    [Collapse]Chart Elements
     [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]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]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Grid Lines, Tickmarks and Interlacing

This document describes the concepts of using axes' grid lines and tickmarks in XtraCharts: their purpose, implementation and capabilities. In addition, it highlights how a chart's diagram can be made interlaced. Before reading this text, it may be useful to review the basics of using axes and axis scale types in XtraCharts.

This document consists of the following sections.

Expanded Grid Lines and Tickmarks Overview

Tickmarks divide an axis into equal sections by a step whose value is determined by the special options of an axis. Tickmarks are used to improve comprehension of a chart's data. In addition, axis labels may accompany them.

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.

There are two types of tickmarks and grid lines: major and minor. The following images demonstrate them.

Besides tickmarks, it's also possible to enable Interlacing for the chart's diagram from any of its axes. You can make the diagram's background ribbed, alternating two colors, via the AxisBase.Interlaced property. The default interlacing color can be changed via the AxisBase.InterlacedColor property, referenced to its fill style (Axis2D.InterlacedFillStyle).

Note that the interlacing doesn't depend on whether an axis' grid lines or tickmarks are visible or not. Moreover, the interlacing and grid lines are maintained after the Axis2D.Visibility property is set to false. This situation is illustrated in the following image.

The rate at which these colors are repeated depends on the inter-related rate of both major tickmarks and grid lines. It's automatically determined by the ScaleGridOptionsBase.AutoGrid property of your current scale, which is set to true, by default.

To manually determine the rate at which tickmarks, grid lines and interlacing occur altogether, use the ScaleGridOptionsBase.GridSpacing property. Since ScaleGridOptionsBase.GridSpacing can't 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 becomes disabled. And, after you re-enable the ScaleGridOptionsBase.AutoGrid property, this resets the ScaleGridOptionsBase.GridSpacing property.

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

Properties values

The resulting image

AutoGrid = true

AutoGrid = false

GridSpacing = 200

To learn how tickmarks and grid lines (both major and minor) can be individually customized, refer to the following sections of this document: Customizing Tickmarks and Customizing Grid Lines.

Expanded Customizing Tickmarks

To access the properties of axis tickmarks at design time, select the required axis, and in the Properties window, expand the Axis2D.Tickmarks property, as shown in the following image.

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

The only property which 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 manually define the number of minor tickmarks to be shown between each pair of major tickmarks, via the AxisBase.MinorCount property. Note that this property also affects the number of minor grid lines, which are described in the next section of this document.

As for the overall number of major tickmarks to be drawn along an axis, that is (along with the number of major grid lines) determined automatically, since the ScaleGridOptionsBase.AutoGrid property is enabled by default. To learn more on this, refer to the following section of this document: Grid Lines and Tickmarks Overview.

Expanded Customizing Grid Lines

To access the properties of grid lines at design time, select the required axis, and in the Properties window, expand the AxisBase.GridLines property, as shown in the following image.

With XtraCharts, it's possible to define the appearance of major and minor grid lines independently, via the properties described below.

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 shown between each pair of major gridlines, is determined by the AxisBase.MinorCount property. Again, note that this property affects both minor tickmarks and grid lines.

As for the overall number of major grid lines to be drawn along an axis, that is (along with the number of the major tickmarks) determined automatically, since the ScaleGridOptionsBase.AutoGrid property is enabled by default. To learn more on this, refer to the following section of this document: Grid Lines and Tickmarks Overview.

Expanded See Also

How would you rate this topic?​​​​​​​