Integrate the WinForms Chart with the Range Control

Sep 23, 2025
5 minutes to read

Tip

You can use DevExpress BI Dashboard to build data visualization and analysis UIs that include Charts, Grids, Maps, Pivot Grids, Cards, Range Selectors, and other elements. This cross-platform product is available as a part of the DevExpress Universal Subscription.

Review the following help topic to learn the basics: Get Started with the DevExpress Dashboard.

When you deal with a large amount of data, you can integrate XtraCharts for Windows Forms and a Range control in one application. These two controls allow you to track data changes, select a range of data, scroll, zoom in and out, and so on. As a result, you get an interactive tool that simplifies the comparison and analysis of different chart series.

Run Demo: Range Control Integration

For more information on the Range control, see the following section: Range Control.

Connect to a Range Control

To integrate controls, drag a RangeControl from the DX.25.2: Common Controls toolbox tab and drop it onto a form with a ChartControl. A Range control is automatically bound to a chart and allows you to see a chart series in the Range control’s Viewport.

To make sure binding succeeded, check the RangeControl.Client property: the value should be the Chart name (for example, chartControl1).

Chart and Range Customization

You can customize a display of the Chart control within the Range control. For this, access the RangeControlOptions object that contains properties that specify the series appearance in a Range control’s viewport.

Use the XYDiagram2DSeriesViewBase.RangeControlOptions to get access to the range control options for a series.

The following properties of the RangeControlOptions class affect the series appearance in a Range control:

ViewTypeGets or sets a value that specifies which view type (either Line or Area) should be used to represent an XYDiagram2D series in a Range Control.SeriesTransparencyGets or sets the transparency (0-255) to apply to a series displayed in a Range control.ValueLevelSpecifies which level of data points should be used to represent a FinancialIndicator series in a Range Control.VisibleGets or sets a value indicating whether or not this series should be displayed in a Range Control.

In the image below, the first Line series is hidden in the viewport (the RangeControlOptions.Visible property is set to false), while the second Line series is displayed as an Area (RangeControlOptions.ViewType is set to Area) in the Range control.

Interaction Capabilities

When you run your application, you can do the following:

Select ranges (a chart adjusts axis ranges to the value that corresponds to the interval you selected)
Use animated range selection
Zoom in and out
Use the touch screen

For additional information on chart interaction, refer to the End-User Capabilities section.

Examples

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.

Form1.cs
Form1.vb

csharp

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

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