Skip to main content

ChartRangeControlClientDateTimeGridOptions.GridAlignment Property

Gets or sets the date-time measure unit to which the chart’s gridlines and labels should be aligned when the chart is bound to the range control.

Namespace: DevExpress.XtraCharts

Assembly: DevExpress.XtraCharts.v24.1.dll

NuGet Package: DevExpress.Charts

Declaration

[XtraSerializableProperty]
public DateTimeGridAlignment GridAlignment { get; set; }

Property Value

Type Description
DateTimeGridAlignment

A DateTimeGridAlignment enumeration value that represents the measurement unit to which a chart’s gridlines and labels should be aligned.

Available values:

Name Description
Millisecond

Specifies a millisecond as the date-time unit to which axis gridlines should be aligned.

Second

Specifies a second as the date-time unit to which axis gridlines should be aligned.

Minute

Specifies a minute as the date-time unit to which axis gridlines should be aligned.

Hour

Specifies an hour as the date-time unit to which axis gridlines should be aligned.

Day

Specifies a day as the date-time unit to which axis gridlines should be aligned.

Week

Specifies a week as the date-time unit to which axis gridlines should be aligned.

Month

Specifies a month as the date-time unit to which axis gridlines should be aligned.

Quarter

Specifies a quarter of a year as the date-time unit to which axis gridlines should be aligned.

Year

Specifies a year as the date-time unit to which axis gridlines should be aligned.

Property Paths

You can access this nested property as listed below:

Object Type Path to GridAlignment
ChartRangeControlClientDateTimeOptions
XYDiagram2D

Remarks

To specify the GridAlignment property, you should access the ChartRangeControlClientDateTimeGridOptions object via the ChartRangeControlClientDateTimeOptions.RangeControlDateTimeGridOptions property. The ChartRangeControlClientDateTimeOptions object is returned by the RangeControl.ClientOptions property for the chart which contains date-time arguments.

The image below shows the GridAlignment property in action for the measure unit set to Week.

ChartRangeControl_GridAlignment_Week

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.

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);
        }
    }
}
See Also