[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Collapse]Chart Control
   [Expand]Product Information
   [Expand]Getting Started
    [Expand]Creating Charts
    [Expand]Chart Elements
    [Collapse]End-User Interaction
      Client Chart Designer
     [Collapse]Crosshair Cursor
       Crosshair Cursor Customization
       Changing the Crosshair Cursor Layout
     Supported Browsers
     Adding a Web Chart
     Handling Client-side Scripts
     Medium Trust Support
     Web Farm and Web Gardens Support
   [Expand]Design-Time Features
   [Expand]Visual Elements
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[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

This topic describes different ways of customizing crosshair cursor elements and formatting crosshair label content and contains examples of how to do this in applications.

Expanded Interaction Customization

Expanded Formatting Crosshair Cursor Content

Use a pattern of crosshair axis and crosshair cursor labels

You can change the default format of text displayed within the crosshair labels by specifying a pattern (e.g., only show point values). To accomplish this, use the CrosshairAxisLabelOptions.Pattern, SeriesBase.CrosshairLabelPattern and CrosshairOptions.GroupHeaderPattern properties.

A full list of available placeholders is detailed below.

Pattern Description
{A} Displays a series point argument.
{V} Displays series point values.
{VP} Displays series point values as percentages (for a Pie series and Full-Stacked series).
{S} Displays the name of the series.
{G} Displays the name of a stacked group.
{W} Displays the weight (for a Bubble series).
{V1} Displays the first value (for range series).
{V2} Displays the second value (for range series).
{VD} Displays the duration between the first and second data point values (for range series).
{HV} Displays the high value (for a Financial series).
{LV} Displays the low value (for a Financial series).
{OV} Displays the open value (for a Financial series).
{CV} Displays the close value (for a Financial series).

The Format Specifiers topic explains which standard and custom formats can be used with placeholders to format numeric and date-time values within a crosshair cursor label.

The image below shows the SeriesBase.CrosshairLabelPattern property set to "{S}: {A} - {V}".


For real-life examples of how this can be done, see the following tutorial:

Expanded Appearance Customization

The following image highlights settings that configure the Crosshair Cursor appearance.

The properties in the table below allow you to customize the common appearance options of the crosshair cursor.

Member Description
CrosshairOptions.ValueLineColor Gets or sets the color of crosshair value lines.
CrosshairOptions.ValueLineStyle Gets the value line style settings of the crosshair cursor.
CrosshairOptions.ArgumentLineColor Gets or sets the color of crosshair argument lines.
CrosshairOptions.ArgumentLineStyle Gets the argument line style settings of the crosshair cursor.
CrosshairOptions.CrosshairLabelBackColor Gets or sets the background color of the Crosshair series label.
CrosshairOptions.CrosshairLabelTextOptions Returns text options of the Crosshair series label item.
CrosshairOptions.GroupHeaderTextOptions Returns text options of the Crosshair series label group header.

If more complex customizations are required, use the WebChartControl.CustomDrawCrosshair event to modify the appearance.


Show Me

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

This example illustrates how to display the "Total" point value in the crosshair cursor panel.

To accomplish this task, handle the client-side ASPxClientWebChartControl.CustomDrawCrosshair event and include the Total value via the LabelElement.footerText property of the last crosshair panel element.

Expanded See Also

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