Crosshair Cursor Customization

• May 22, 2020
• 4 minutes to read

This topic describes different ways of customizing crosshair cursor elements and formatting crosshair label content, and contains examples on how this can be done in your application.

Interaction Customization

You can specify how the crosshair cursor should interact with chart series points in one of the following ways:

• Show crosshair axis lines and labels

  As mentioned in the Overview topic, crosshair argument lines and crosshair axis labels are hidden by default.

  To show value lines, argument labels and value labels of the crosshair cursor on a chart, set the CrosshairOptions.ShowValueLine, CrosshairOptions.ShowArgumentLabels and CrosshairOptions.ShowValueLabels properties to true.

  To access a CrosshairOptions object (containing all the settings necessary to customize the crosshair cursor appearance and position on a chart), use the ChartControl.CrosshairOptions property.

  After enabling the crosshair axis lines and labels, the chart will look like the following.

  

• Specify the crosshair label mode

  In addition, you can specify the way a crosshair cursor label should be shown for a multiple series chart using the CrosshairOptions.CrosshairLabelMode property.

  A common crosshair label can be shown for all series (the default mode in which the group header is displayed on a crosshair label), for each series separately, or for the nearest series only.

  The image below demonstrates the second approach.

  

  NOTE

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

Formatting Crosshair Cursor Content

Use a pattern of crosshair axis and crosshair cursor labels

As you can see in the image above, crosshair axis labels and crosshair cursor labels show series point argument and values.

You can change the default format of text displayed within the crosshair labels by specifying a pattern (e.g., only show point values). This can be done using the CrosshairAxisLabelOptions.Pattern, XYSeries2D.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 and Donut, Nested Donut 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 a Range Area series).
{V2}	Displays the second value (for a Range Area series).
{VD}	Displays the duration between the first and second data point values (for a Range Area series).
{HV}	Displays the high value (for a Financial Series series).
{LV}	Displays the low value (for a Financial Series series).
{OV}	Displays the open value (for a Financial Series series).
{CV}	Displays the close value (for a Financial Series series).

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

Examples

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

• How to: Format Values Displayed in a Crosshair Cursor Using a Crosshair Label's Patterns

Appearance Customization

The chart control provides numerous ways to customize the appearance (e.g., to change the default color, dash style and thickness of crosshair value lines) of all crosshair elements:

• by changing the appearance properties of the crosshair cursor;

  The table below lists properties that affect the appearance of crosshair cursor elements.

  Member	Description
  CrosshairOptions.ValueLineBrush	Gets or sets the color of the crosshair value line.
  CrosshairOptions.ValueLineStyle	Gets or sets the value line style settings of the crosshair cursor.
  CrosshairOptions.ArgumentLineBrush	Gets or sets the color of a crosshair argument line when implementing custom drawing of a crosshair cursor.
  CrosshairOptions.ArgumentLineStyle	Gets or sets the argument line style settings of the crosshair cursor.

• by using the ChartControl.CustomDrawCrosshair event;

  The following images demonstrate the custom draw feature in action.

  Default Appearance	Custom Draw

• by using the crosshair label template from the Axis2D.CrosshairLabelTemplate and XYSeries2D.CrosshairLabelTemplate properties.

Examples

The following examples demonstrate how you can specify custom appearance of the crosshair cursor.

• How to: Custom Draw a Crosshair Cursor
• How to: Customize the Appearance of Crosshair Axis Labels
• How to: Customize the Appearance of Crosshair Series Labels

To learn more on chart interaction, see the Tooltips, Animation and Hit-Testing topics.