[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]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Collapse]Chart Control
   [Expand]Getting Started
   [Expand]Fundamentals
   [Expand]Providing Data
   [Expand]Appearance Customization
   [Collapse]End-User Features
    [Collapse]Basic End-User Interaction
      Selecting and Highlighting (2D Charts)
      Zooming and Scrolling (2D XY-Charts)
      Zooming and Scrolling (3D Charts)
      Rotation (3D Charts)
    [Expand]Tooltip and Crosshair Cursor
    [Expand]Animation
     Print and Export
     Hit Information
     Chart Designer for End-Users
     Integration with a Range Control
     Chart Wizard for End-Users
   [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]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Selecting and Highlighting (2D Charts)

You can use the mouse or touch gestures on touchscreen devices to highlight and select chart elements.

Note

Refer to the Hit Information help document for information on how to define an element under the mouse pointer.

The document consists of the following sections:

Expanded Overview

A user can highlight and select the following 2D chart elements at design time and runtime:

The ChartControl.ObjectHotTracked or ChartControl.ObjectSelected (WebChartControl.ObjectSelected or ChartControlSettings.ObjectSelected) events occur when you highlight or select chart elements. See the Selection and Highlighting's API section for more information about how to use these events.

Note

You cannot highlight chart element within the WebChartControl as this requires the server to send a lot of information to a client during callbacks every time the mouse pointer is moved.

Expanded Selection Modes

The ChartControl.SelectionMode property value defines whether you can select chart elements. When the default property value is None, an end user cannot select a chart's elements. The ElementSelectionMode enumeration lists all the possible selection modes. To enable selection, set the SelectionMode property to one of the following modes:

Mode Example Description
Single

Only one series element can be selected in a chart at the same time. Click or tap a series element to select it.

Set the ChartControl.SelectionMode property to ElementSelectionMode.Single to enable this mode.

Multiple

You can select multiple series elements simultaneously. Click or tap a series element to select it. Hold Ctrl and click a series element to deselect it.

In this mode, you can also use the Selection Rectangle to select multiple series's elements. Move the mouse pointer while the Ctrl key and the left mouse button are pressed to mark series elements to be selected.

Set the ChartControl.SelectionMode property to ElementSelectionMode.Multiple to enable this mode.

Extended

The Extended mode combines the Single and Multiple selection modes' behaviors.

  • Click an element to select it.
  • To select/deselect multiple elements, click them while the Ctrl key is pressed.

Set the ChartControl.SelectionMode property to ElementSelectionMode.Extended to enable this mode.

Important

Only series and series points support multiple selection.

Note

The series element's type that you can select depends on the ChartControl.SeriesSelectionMode property's value. In the animations above, the chart's SeriesSelectionMode property is set to the Point mode. See the Series Selection Modes section for more information.

Expanded Series Selection Modes

The ChartControl.SeriesSelectionMode property specifies a series element that is selected when you click a series's point. The SeriesSelectionMode enumeration contains all the possible modes.

Mode Example Description
Point

You can select only one series point at a time.

Set the ChartControl.SeriesSelectionMode property to SeriesSelectionMode.Point to enable this mode.

Argument

This mode allows you to select points with the same argument simultaneously.

Set the ChartControl.SeriesSelectionMode property to SeriesSelectionMode.Argument to enable this mode.

Series (default mode)

In this mode, click a series's point to select the entire series.

Set the ChartControl.SeriesSelectionMode property to SeriesSelectionMode.Series to enable this mode.

Expanded Selection and Highlighting API

The Chart Control's ObjectHotTracked event

The ChartControl.ObjectHotTracked event allows you to perform specific actions when a user hot-tracks a chart element. You can also use the event to prevent users from highlighting certain chart elements. The following code illustrates how to hot-track only series:

The table below lists members you can use to handle the ObjectHotTracked event:

Member Description
ChartControl.ObjectHotTracked Occurs before a chart element is hot-tracked at runtime.
HotTrackEventArgs Provides data for the Chart Control's ChartControl.ObjectHotTracked and ChartControl.ObjectSelected events.

The Chart Control's ObjectSelected event

The ChartControl.ObjectSelected event allows you to perform specific actions when a user selects a chart element. You can also use the event to prevent users from selecting certain chart elements. The following code illustrates how to select only series:

The following table lists the API members you can use to handle the ObjectSelected event:

Member Description
ChartControl.ObjectSelected Occurs before a chart element is selected at runtime.
HotTrackEventArgs Provides data for the Chart Control's ChartControl.ObjectSelected and ChartControl.ObjectHotTracked events.

The Chart Control's SelectedItemsChanging event

The ChartControl.SelectedItemsChanging event occurs before chart elements are selected.

The following table lists the SelectedItemsChanging event-related members:

Member Description
ChartControl.SelectedItemsChanging Occurs before the Chart Control's selected items collection is changed.
SelectedItemsChangingEventArgs Provides data for the ChartControl.SelectedItemsChanging (WebChartControl.SelectedItemsChanging or ChartControlSettings.SelectedItemsChanging) event.
SelectedItemsChangingEventArgs.Action Gets the action that describes how the selected items' collection has been changed.
SelectedItemsChangingEventArgs.Cancel Gets or sets the value that identifies whether the selection's change is canceled.
SelectedItemsChangingEventArgs.OldItems Provides access to previously selected chart elements (series and series points) and business data objects if a Chart Control or a series is bound to a data source.
SelectedItemsChangingEventArgs.NewItems Provides access to a collection of newly selected chart elements (series and series points) and business data objects if a Chart Control or a series is bound to a data source.

The Chart Control's SelectedItemsChanged event

The ChartControl.SelectedItemsChanged event occurs when a user selected chart items.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T182608.

The example above uses the following API members:

Member Description
ChartControl.SelectedItemsChanged Occurs after the Chart Control's selected items' collection has been changed.
SelectedItemsChangedEventArgs Provides data for the ChartControl.SelectedItemsChanging (WebChartControl.SelectedItemsChanging or ChartControlSettings.SelectedItemsChanging) event.
ChartControl.SelectedItems Returns the Chart Control's collection of selected items (chart points, series, or business data objects when the chart is bound to a data source).

How to Change the Selected Items in Code

Use the ChartControl.SetObjectSelection method to specify the selected objects at runtime.

Use the ChartControl.ReplaceSelectedItems method to replace the selected items with the specified series or points.

The ChartControl.ClearSelection method allows you to deselect all the chart elements at runtime.

Expanded See Also

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