ChartRangeControlClientGridOptions.GridMode Property

Specifies the current grid mode of a chart range control client.

Namespace: DevExpress.XtraCharts

Assembly: DevExpress.XtraCharts.v18.2.dll

Declaration

C#

[XtraSerializableProperty]
public ChartRangeControlClientGridMode GridMode { get; set; }

VB.NET

<XtraSerializableProperty>
Public Property GridMode As ChartRangeControlClientGridMode

Property Value

Type	Description
ChartRangeControlClientGridMode	A ChartRangeControlClientGridMode enumeration value, which selects one of the modes.

Available values:

Name	Description
Auto	Identifies the auto grid mode of the chart range control client, in which the values of ChartRangeControlClientGridOptions.GridSpacing, ChartRangeControlClientGridOptions.GridOffset, and ChartRangeControlClientDateTimeGridOptions.GridAlignment properties are not specified and calculated automatically.
ChartGrid	Identifies the chart grid mode of the chart range control client, in which the ChartRangeControlClientGridOptions.GridSpacing, ChartRangeControlClientDateTimeGridOptions.GridAlignment, ChartRangeControlClientGridOptions.GridOffset properties are not specified and calculated according to the ScaleGridOptionsBase.GridSpacing and DateTimeScaleOptions.GridAlignment (NumericScaleOptions.GridAlignment), ScaleGridOptionsBase.GridOffset properties, correspondingly. For example, in the image below, the DateTimeScaleOptions.GridAlignment property is set to Week, ScaleGridOptionsBase.GridSpacing = 1.
Manual	Identifies the manual grid mode of the chart range control client, meaning that the ChartRangeControlClientGridOptions.GridSpacing, ChartRangeControlClientGridOptions.GridOffset and ChartRangeControlClientDateTimeGridOptions.GridAlignment properties are in effect, and they should be manually defined. For example, in the image below, the ChartRangeControlClientGridOptions.GridSpacing property is set to 4, and ChartRangeControlClientDateTimeGridOptions.GridAlignment is set to Day.

Property Paths

You can access this nested property as listed below:

Object Type	Path to GridMode
ChartRangeControlClientDateTimeOptions	.RangeControlDateTimeGridOptions.GridMode
ChartRangeControlClientNumericOptions	.RangeControlNumericGridOptions.GridMode
GanttDiagram	.RangeControlNumericGridOptions.GridMode
SwiftPlotDiagram	.RangeControlNumericGridOptions.GridMode
XYDiagram	.RangeControlNumericGridOptions.GridMode
XYDiagram2D	.RangeControlNumericGridOptions.GridMode

Remarks

Use the GridMode property to define which grid mode of the chart range control client should be used: auto, chart grid or manual.

Note that if you defined one of the ChartRangeControlClientGridOptions.GridSpacing, ChartRangeControlClientGridOptions.GridOffset or ChartRangeControlClientDateTimeGridOptions.GridAlignment properties in the ChartRangeControlClientGridMode.Auto grid mode, this mode is changed to ChartRangeControlClientGridMode.Manual.

Example

This example demonstrates how the grid lines and grid snapping of the chart within the range control’s viewport can be customized at runtime.

To access the client options of the chart inside the range control’s viewport, use the RangeControl.ClientOptions property. In this example, the chart control contains data with date-time arguments, so this property returns an object of the ChartRangeControlClientDateTimeOptions type.

To access the grid properties (e.g., ChartRangeControlClientGridOptions.SnapSpacing, ChartRangeControlClientDateTimeGridOptions.SnapAlignment, ChartRangeControlClientGridOptions.GridSpacing and ChartRangeControlClientDateTimeGridOptions.GridAlignment) of the chart range control client, access the ChartRangeControlClientDateTimeGridOptions object using the ChartRangeControlClientDateTimeOptions.RangeControlDateTimeGridOptions property.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-grid-lines-grid-snapping-of-the-chart-range-control-client-t129232

Form1.cs

using System;
using System.Windows.Forms;
using DevExpress.XtraCharts;

namespace DateTimeChartRangeControlClient {
    public partial class Form1 : Form {

        const int daysForYear = 30;

        public Form1() {
            InitializeComponent();

            // Call the InitializeChart method. 
            InitializeChart();

            // Specify a Chart control as the Range control client. 
            rangeControl1.Client = chartControl1;

            // Access the date-time grid options of the chart range control client.
            var clientOptions = (ChartRangeControlClientDateTimeOptions)rangeControl1.ClientOptions;
            ChartRangeControlClientDateTimeGridOptions gridOptions = clientOptions.RangeControlDateTimeGridOptions;

            // Specify the manual grid mode of the chart range control client. 
            gridOptions.GridMode = ChartRangeControlClientGridMode.Manual;

            // Customize snap and grid properties of the chart range control client.            
            gridOptions.SnapOffset = 2;
            gridOptions.SnapSpacing = 7;
            gridOptions.SnapAlignment = DateTimeGridAlignment.Day;
            gridOptions.GridSpacing = 7;
            gridOptions.GridAlignment = DateTimeGridAlignment.Day;
            gridOptions.GridOffset = 1;

            // Format labels of the chart range control client.
            gridOptions.LabelFormat = "D";
        }

        void InitializeChart() {

            DateTime baseDate = new DateTime(2000, 1, 1);
            Random rnd = new Random();
            Series series = new Series("Series", ViewType.Bar);

            for (int dayCount = 0; dayCount < daysForYear; dayCount++) {
                DateTime argument = baseDate.AddDays(dayCount);
                double value = rnd.Next(50, 100);
                var seriesPoint = new SeriesPoint(argument, value);
                series.Points.Add(seriesPoint);
            }
            chartControl1.Series.Add(series);
        }
    }
}

Form1.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Windows.Forms
Imports DevExpress.XtraCharts

Namespace DateTimeChartRangeControlClient
    Partial Public Class Form1
        Inherits Form

        Private Const daysForYear As Integer = 30

        Public Sub New()
            InitializeComponent()

            ' Call the InitializeChart method. 
            InitializeChart()

            ' Specify a Chart control as the Range control client. 
            rangeControl1.Client = chartControl1

            ' Access the date-time grid options of the chart range control client.
            Dim clientOptions = CType(rangeControl1.ClientOptions, ChartRangeControlClientDateTimeOptions)
            Dim gridOptions As ChartRangeControlClientDateTimeGridOptions = clientOptions.RangeControlDateTimeGridOptions

            ' Specify the manual grid mode of the chart range control client. 
            gridOptions.GridMode = ChartRangeControlClientGridMode.Manual

            ' Customize snap and grid properties of the chart range control client.            
            gridOptions.SnapOffset = 2
            gridOptions.SnapSpacing = 7
            gridOptions.SnapAlignment = DateTimeGridAlignment.Day
            gridOptions.GridSpacing = 7
            gridOptions.GridAlignment = DateTimeGridAlignment.Day
            gridOptions.GridOffset = 1

            ' Format labels of the chart range control client.
            gridOptions.LabelFormat = "D"
        End Sub

        Private Sub InitializeChart()

            Dim baseDate As New DateTime(2000, 1, 1)
            Dim rnd As New Random()
            Dim series As New Series("Series", ViewType.Bar)

            For dayCount As Integer = 0 To daysForYear - 1
                Dim argument As DateTime = baseDate.AddDays(dayCount)
                Dim value As Double = rnd.Next(50, 100)
                Dim seriesPoint = New SeriesPoint(argument, value)
                series.Points.Add(seriesPoint)
            Next dayCount
            chartControl1.Series.Add(series)
        End Sub
    End Class
End Namespace

Related GitHub Examples

The following code snippet (auto-collected from DevExpress Examples) contains a reference to the GridMode property.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

C#

how-to-customize-grid-lines-grid-snapping-of-the-chart-range-control-client-t129232/CS/Form1.cs#L24

// Specify the manual grid mode of the chart range control client.
gridOptions.GridMode = ChartRangeControlClientGridMode.Manual;