Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]Welcome to DevExpress .NET Documentation
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Collapse]Chart Control
    [Expand]Getting Started
    [Expand]Fundamentals
    [Expand]Providing Data
    [Expand]Appearance Customization
    [Expand]End-User Features
    [Expand]Design-Time Features
    [Expand]Visual Elements
    [Expand]Examples
    [Collapse]Additional Resources
      Product Class Structure
      Attached Properties
      Chart Clients for the Range Control
      Deployment
   [Expand]Chart3D Control
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Chart Clients for the Range Control

This document lists the chart client types and explains how to use them in a Range control.

Chart Clients are used to visualize numeric or date-time data within the range control's viewport. Clients interact with the Range control via the IRangeControlClient interface.

Chart Range Control Clients are divided into two groups:

Expanded Common Information

The Client uses one of the following views to represent data when data is bound to a Client directly and when data is provided from the Chart’s series:

View Type

Image

Description

RangeControlClientAreaView

An area chart.

RangeControlClientBarView

A bar chart.

RangeControlClientLineView

A line chart.

Note

Chart clients show an Area view by default.

The following dependency properties configure Chart Range Control Client appearance:

Property Description
ChartRangeControlClientBase.ShowGridLines Gets or sets a value indicating whether the grid lines should be visible in the chart range control client.
ChartRangeControlClientBase.ShowArgumentLabels Gets or sets a value that specifies whether to show a data point's argument label in the chart range control client.
ChartRangeControlClientBase.GridLinesBrush Gets or sets chart client grid lines' color.
ChartRangeControlClientBase.ArgumentLabelTemplate Gets or sets the argument label template.

Expanded Standalone Chart Range Control Clients

A Standalone Chart Range Control Client uses its ItemsSource property to draw a chart in the Range Control. The following standalone chart clients are available:

See the Range Control section for more information.

To add a chart client (numeric chart client or date-time chart client) to the Range control, do one of the following:

  • Drag the NumericChartRangeControlClient (or DateTimeChartRangeControlClient) from the DX.17.2: Common Controls toolbox tab to a form with a Range control.

  • Click the Range control's smart tag, and in its actions list, select the NumericChartRangeControlClient (or DateTimeChartRangeControlClient) in the Client combo box.

After adding the numeric chart client, your XAML should appear as follows:

The RangeControl.Client property is automatically set to NumericChartRangeControlClient (or DateTimeChartRangeControlClient).

To display data in chart clients, you need to bind the client to a data source using the following properties:

Member Description
ChartRangeControlClient.ItemsSource Gets or sets the chart client's data source.
ChartRangeControlClient.ArgumentDataMember Gets or sets the name of the data field that contains the chart client's point arguments.
ChartRangeControlClient.ValueDataMember Gets or sets the name of the data field that contains the chart client's point values.
Note

When you bind a numeric chart range control client to simple type objects (short, integer, long, double, decimal, float types, etc.), for example, to an array of simple objects, you do not need to use ChartRangeControlClient.ArgumentDataMember and ChartRangeControlClient.ValueDataMember properties. In this case, the numeric chart client automatically treats simple type objects' values as chart values. As a result, the data values are shown in the same order in which elements are added to the array.

Specify the ChartRangeControlClient.ArgumentDataMember property if you need to display numeric points sorted by arguments in the ascending order, for example, from the collection.

To assign a view type to a numeric chart client or date-time chart client, set its ChartRangeControlClient.View property to the RangeControlClientView descendant representing the current chart view.

See the following examples to learn more about how to use the chart client for the range control:

Expanded Chart Range Control Client bound to a Chart Control

The Chart Bound Range Control Client displays chart series' data in the Range Control and allows scrolling and zooming a chart.

The following code demonstrates how to configure the Chart Bound Range Control Client's behavior:

The code above uses the following classes and members:

Symbols Description
ChartBoundRangeControlClient The Chart Range Control Client that obtains data to visualize from the bound Chart Control.
ChartBoundRangeControlClient.ScaleOptions Gets or sets the scale options that configure grid appearance. This is a dependency property.
ScaleOptions The Chart bound Range Control scale options storage.
ScaleOptions.GridBehavior Gets or sets the behavior that specifies how the Chart bound Range Control Client forms its grid. This is a dependency property.
ScaleOptions.SnapBehavior Gets or sets the behavior that specifies how the Chart bound Range Control Client snaps its range bounds. This is a dependency property.

The Chart Bound Client can use one of the following Grid Behaviors:

Behavior Sample Image Description
AutoGridBehavior

Identifies the Chart bound Range Control Client Grid Behavior, in which the Client automatically calculates its grid spacing, grid offset and grid alignment (for the date-time scale) values.

ChartGridBehavior

Identifies the Chart bound Range Control Client Grid Behavior which obtains the Client's grid spacing and grid offset and, grid alignment (for the date-time scale) values from the bound chart.

ManualGridBehavior

Identifies the Chart bound Range Control Client Grid Behavior which forms Client's grid using ManualGridBehavior.Offset, ManualGridBehavior.Spacing and ManualGridBehavior.Alignment (for the date-time scale) values.

The following predefined Snap Behaviors specifies how the Range control's selected range is aligned:

Behavior Sample Image Description
AutoSnapBehavior

Identifies the Chart bound Range Control Client's Snap Behavior, in which the selected range snaps to the Client's grid.

ChartSnapBehavior

The Chart Snap Behavior specifies that the Range control's selected range is aligned by the bound chart's measurement.

ManualSnapBehavior

Chart bound Range Control Client Snap Behavior, in which the selected range is aligned using parameters that the behavior specifies manually via the ManualSnapBehavior.Offset, ManualSnapBehavior.Spacing, ManualSnapBehavior.Alignment (for date-time scale) properties.

To configure how a Range Control Client displays the bound Chart's series, use the following code:

The following classes and members allow to configure the appearance of a series within the Range Control:

Symbols Description
XYSeries2D.RangeControlOptions Gets or sets options that specify how the Range control visualizes the series data.
RangeControlOptions The storage of settings that specify series appearance in the Range Control.
RangeControlOptions.Visible Gets or sets the value indicating whether the Range Control visualized the series data.
RangeControlOptions.View Gets or sets the view that configures the series' appearance within the Range Control. This is a dependency property.

Is this topic helpful?​​​​​​​