[Expand]General Information
[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].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Collapse]Chart Control
    [Expand]Getting Started
    [Expand]Fundamentals
    [Expand]Providing Data
    [Expand]Chart Elements
    [Expand]Appearance Customization
    [Collapse]End-User Features
     [Expand]End-User Capabilities
     [Collapse]Tooltip and Crosshair Cursor
       Tooltip
       Crosshair Cursor
       Crosshair Cursor Customization
       Changing the Crosshair Cursor Layout
      Hit-Testing
      Selection
     [Expand]Animation
      Print and Export
      Chart Designer for End-Users
    [Expand]Design-Time Features
    [Expand]Examples
    [Expand]Additional Resources
   [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]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [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]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Crosshair Cursor Customization

You can format the Crosshair Cursor content and configure Crosshair Cursor appearance and behavior.

This topic explains how to:

Expanded Format Crosshair Content

Format patterns allow you to manage how crosshair elements display their content. You can specify these patterns for the elements labeled in the following image.

The following code specifies patterns the Crosshair Cursor should apply to its elements' text:

Use the following properties to format Crosshair Cursor element content:

Property Description
XYSeries2D.CrosshairLabelPattern Specifies a format string the Crosshair Cursor should apply to the text that identifies the series.
Indicator.CrosshairLabelPattern Specifies a format string the Crosshair Cursor should apply to the text that identifies the indicator.
ChartControl.CrosshairOptions Defines the settings that relate to the Crosshair Cursor.
CrosshairOptions.GroupHeaderPattern Specifies a string that formats group header text. Use it when the Crosshair has data to display in the Crosshair Cursor's label.
Axis2D.CrosshairAxisLabelOptions Defines the axis label settings that relate to the Crosshair Cursor.
CrosshairAxisLabelOptions.Pattern Specifies a string that formats the Crosshair's axis labels.

Patterns can comprise plain text and placeholders with Format Specifiers. The following table lists available placeholders:

Pattern Description
{S} Displays the Series.DisplayName value.
{A} Displays a series point argument.
{V} Displays series point values.
Stacked series-specific placeholders
{VP} Displays series point values as percentages.
{G} Displays the name of a stacked group.
{TV} Displays a total group value.
Bubble series-specific placeholders
{W} Displays the weight.
Range series-specific placeholders
{V1} Displays the first value.
{V2} Displays the second value.
{VD} Displays the duration between the first and second data point values formatted using a common time format (e.g. HH:MM:SS for date time values and #.## for numeric values).
{VDTD} Displays the duration between the first and second date-time data point values in days.
{VDTH} Displays the duration between the first and second date-time data point values in hours.
{VDTM} Displays the duration between the first and second date-time data point values in minutes.
{VDTS} Displays the duration between the first and second date-time data point values in seconds.
{VDTMS} Displays the duration between the first and second date-time data point values in milliseconds.
Financial series specific placeholders
{OV} Displays the open value.
{HV} Displays the high value.
{LV} Displays the low value.
{CV} Displays the close value.
Indicator specific placeholders
{I} Displays an indicator name.
{A} Displays an indicator point's argument.
{V} Displays a single-line indicator or MACD indicator point's value.
{SV} Displays a MACD indicator signal line's point value.
{AV} Displays the MovingAverage indicator value.
{LV} Displays the MovingAverage indicator lower envelope line point's value.
{UV} Displays the Moving Average indicator upper envelope line point's value.
{T} Displays the Error Bar indicator point's top value.
{B} Displays the Error Bar indicator point's bottom value.
X-axis label specific placeholders
{A} Displays a series point argument.
Y-axis label specific placeholders
{V} Displays series point values.
{VP} Displays series point values as percentages.

In XAML, insert empty brackets into the beginning of a pattern if it starts with a placeholder.

When the Chart control or a series is bound to data, the pattern may contain data field values in addition to placeholders. For example, the data source contains the Discount field and the pattern may looks like: {S}: {V:F2} (Discount: {Discount:P0}).

Additional examples:

Expanded Show Crosshair Content in a Legend

The Crosshair Cursor can display its content in a legend instead of the Crosshair label. The Crosshair Cursor uses a legend the Series.Legend or Indicator.Legend property specifies. If these properties are not defined, the Crosshair Cursor uses the first legend in the ChartControlBase.Legends collection.

The code below makes the Crosshair Cursor to display its content in a legend and configures legend settings:

The following table lists the API members the code above uses:

Member Description
CrosshairOptions.ContentShowMode Specifies the element the Crosshair Cursor uses to show its content.
CrosshairContentShowMode (see CrosshairContentShowMode) Lists elements the Crosshair can use.
Legend.MaxCrosshairContentWidth Defines a maximum width of area that the Crosshair's content can occupy.
Legend.MaxCrosshairContentHeight Defines a maximum height of area that the Crosshair's content can occupy.
Note

Use the XYSeries2D.CrosshairContentShowMode and Indicator.CrosshairContentShowMode properties to specify an element the Crosshair Cursor should use for an individual series/indicator to display related information.

Expanded Change Crosshair Element Visibility

The Chart control can display the Crosshair Cursor with argument axis labels, value lines, and value axis labels in addition to the Crosshair Cursor's label and argument line:

The code below enables visibility of elements mentioned previously:

The following table lists the API members the code above uses:

Member Description
CrosshairOptionsBase.ShowCrosshairLabels Specifies whether to show the Crosshair Cursor's labels.
CrosshairOptions.ShowArgumentLabels Defines whether to display argument axis labels.
CrosshairOptions.ShowArgumentLine Defines whether to display argument lines.
CrosshairOptions.ShowValueLabels Specifies whether to show value axis labels.
CrosshairOptionsBase.ShowValueLine Specifies whether to show value lines.
CrosshairOptions.ShowOnlyInFocusedPane Defines whether to show the Crosshair Cursor only in a focused pane.

Expanded Display Individual Labels for Each Series/Indicator

The Crosshair Cursor can display individual labels for each series/indicator instead of a common label:

The following code demonstrates how to enable individual labels:

The following table lists the API members the code above uses:

Member Description
CrosshairOptions.CrosshairLabelMode Specifies how to show the Crosshair Cursor's label for each series or indicator.
CrosshairLabelMode (see CrosshairLabelMode) Lists modes that define how to show the Crosshair Cursor's label for each series or indicator.
Note

The crosshair label is automatically displayed with a beak in the CrosshairLabelMode.ShowForEachSeries and CrosshairLabelMode.ShowForNearestSeries modes.

Expanded Customize Crosshair Cursor Element Appearance

The Chart control allows you to fine-tune the appearance of Crosshair Cursor elements:

The example below configures the Crosshair Cursor's appearance to resemble to the one in the image above:

The following table lists API members you can use to customize crosshair appearance:

Member Description
CrosshairOptions.ArgumentLineBrush Specifies the brush with which to draw the argument line.
CrosshairOptionsBase.ValueLineBrush Specifies the brush with which to draw the value line.
CrosshairOptions.ArgumentLineStyle Defines the style to be applied to an argument line.
CrosshairOptionsBase.ValueLineStyle Defines the style to be applied to a value line.
CrosshairOptionsBase.PopupTemplate Gets or sets the template that specifies Crosshair Cursor appearance.
Series.LegendMarkerTemplate Specifies the template that configures the series's marker in the legend and the Crosshair Cursor's label
Indicator.LegendMarkerTemplate Specifies the template that configures the indicator's marker in the legend and the Crosshair Cursor's label.
Axis2D.CrosshairLabelTemplate Defines the template that configures Crosshair Cursor axis label appearance.
Note

Use the XYSeries2D.CrosshairLabelTemplate property to specify the series item appearance in the Crosshair Cursor.

Additional examples:

Expanded Custom Draw the Crosshair Cursor

You can use the ChartControl.CustomDrawCrosshair event to customize the Crosshair Cursor's appearance.

The following example shows how to use the CustomDrawCrosshair event to replicate Crosshair Cursor appearance to resemble the one in the image above:

The following table lists the API members the code example above uses:

Member Description
ChartControl.CustomDrawCrosshair Occurs before crosshair items are drawn when the chart's contents are being drawn.
CustomDrawCrosshairEventArgs (see CustomDrawCrosshairEventArgs) Provides data for a chart control's ChartControl.CustomDrawCrosshair event.
Note

Additional examples:

Expanded See Also

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