---
title: Crosshair
order: 985
seealso: []
---
# Crosshair
The Cartesian Chart control includes a crosshair that allows you to see exact series values at the current cursor position. Rendered as a pair of horizontal and vertical lines, the crosshair follows the mouse pointer as it hovers over the diagram area. It displays a series label (or multiple labels for multiple series) that shows the series value, and highlights the current _X_ and _Y_ coordinates on the axes.
To customize display settings of the crosshair, or disable this feature, initialize the `CartesianChart.CrosshairOptions` property with an instance of the `Eremex.AvaloniaUI.Charts.CrosshairOptions` class. Then use the properties exposed by the `CrosshairOptions` class to adjust the crosshair settings as needed.
## Disable the Crosshair
The `CrosshairOptions.ShowCrosshair` property allows you to disable the crosshair.
``` xml
```
## Disable Individual Lines and Axis Labels of the Crosshair
The `CrosshairOptions.ShowArgumentLine` and `CrosshairOptions.ShowValueLine` properties can be used to hide the vertical and horizontal line of the crosshair, respectively. To prevent crosshair labels from being displayed for the _X_ and _Y_ axes, use the `CrosshairOptions.ShowArgumentLabel` and `CrosshairOptions.ShowValueLabel` properties.
The following example hides the crosshair's vertical line and label for the _X_ axis:
``` xml
```
## Customize Crosshair Series Labels
The crosshair series labels display the names and current values of the series.
### Format Values in Crosshair Series Labels
The values displayed in the crosshair labels use default formats initially:
To format these values in a custom manner, create a formatter object and assign it to the `Axis.ScaleOptions.CrosshairLabelFormatter` property. Axis values can be [formatted](cartesian-chart.md#format-axis-labels) similarly (see the `Axis.ScaleOptions.LabelFormatter` property).
You can implement a custom label formatter based on a function/expression using the `Eremex.AvaloniaUI.Charts.FuncLabelFormatter` object.
The following example creates a formatter object that formats numeric values as currency. This formatter is used to format _Y_ axis values and values in the crosshair series label.
``` xml
```
``` cs
public partial class MainViewModel : ViewModelBase
{
[ObservableProperty]
FuncLabelFormatter currencyFormatter = new(o => String.Format("{0:c}", o));
}
```
### Hide a Series in the Crosshair
A series view's `CrosshairSeriesViewBase.ShowInCrosshair` property specifies the visibility of this series in the crosshair label.
The following code defines two series (_Interest_ and _Principal_). The `ShowInCrosshair` property is set to `false` for the first series to hide it in the crosshair:
``` xml
```
### Horizontal Indent of the Crosshair Series Label
The `CrosshairOptions.SeriesLabelIndent` property allows you to adjust the horizontal distance between the crosshair series label and the crosshair vertical line. The property's default value is 2.
``` xml
```
### Show an Exact or Interpolated Value in Crosshair Series Labels
Cartesian Chart supports series that consist of sorted discrete data points. For these series, the crosshair lines do not always intersect data points, but are most often displayed between them.
You can use the `CartesianSortedLineSeriesView.CrosshairMode` property to specify whether the crosshair label snaps to the nearest data point, or displays an interpolated value. The following options are available:
- `CrosshairSeriesMode.Point` — The crosshair label snaps to the nearest data point and displays its value.
- `CrosshairSeriesMode.Interpolate` — The crosshair series label displays an interpolated value of the point at the intersection of the vertical crosshair line with the chart.
The following code shows how to customize the `CrosshairMode` option:
``` xml
```
### Customize Crosshair Labels for Multiple Series
#### Label Display Mode
When the Cartesian Chart contains multiple series, the crosshair displays a label for each series:
The `CrosshairOptions.SeriesLabelMode` property specifies whether and how multiple series labels are combined. The following options are available:
- `CrosshairSeriesLabelMode.Smart` (default) — Each series displays its own crosshair label. When labels overlap, they are combined in a single label.
- `CrosshairSeriesLabelMode.ForEachSeries` — Each series displays its own crosshair label. Labels may overlap in this mode.
- `CrosshairSeriesLabelMode.ForNearestSeries` — A crosshair label is displayed only for the series nearest the cursor.
- `CrosshairSeriesLabelMode.OneForAllSeries` — The crosshair displays a single label that combines information from all series.
The following example enables a single crosshair label when multiple series are present.
``` xml
```
#### Series Sorting
When multiple series are combined in a single crosshair label, you can use the `CrosshairOptions.SeriesLabelItemSortMode` property to specify the display order of the series in the label. This property can be set to the following values:
- `CrosshairSeriesLabelItemSortMode.BySeries` (default) — Sorts series by the order in which these series are added to the `CartesianChart.Series` collection.
- `CrosshairSeriesLabelItemSortMode.ByValue` — Sorts series by their _Y_ values.
## Show Delay
Use the `CrosshairOptions.SeriesLabelShowDelay` property to specify the delay (in milliseconds) before a crosshair series label is displayed.
## Include Only Series Near the Cursor
By default, linear charts display crosshair labels for all series that have data points at the current argument value.
The chart control allows you to limit crosshair labels to series near the cursor. Use the `CrosshairOptions.MaxPickDistance` property to specify the range within which to search for data points to include in crosshair labels. For regular linear charts, the `MaxPickDistance` property specifies the maximum vertical distance (in pixels) upward or downward.
In the image above, only data points from the _Series 1_ and _Series 3_ lie within the range limited by a custom `MaxPickDistance` value. The data point from the _Series 2_ (red line) is beyond this range and is not shown.
For [Scatter Line views](cartesian-series-views/scatter-line-series-view.md), the `MaxPickDistance` property specifies the radius of a circular area around the cursor within which to search for data points.
!!! Tip
To display a crosshair label for a single series nearest the cursor, set the `CrosshairOptions.SeriesLabelMode` property to `ForNearestSeries`. See [Label Display Mode](#label-display-mode).
## Customize Crosshair Lines and Labels on the _X_ and _Y_ Axes
A chart control's `CrosshairOptions` object contains a set of properties that allow you to change the visual settings of crosshair lines, _X_ axis label, and _Y_ axis label.
- `ArgumentColor` — The background color of the crosshair _X_ axis labels.
- `ArgumentLineThickness` — The thickness of the crosshair argument line.
- `ArgumentTextColor` — The foreground (text) color of the crosshair _X_ axis labels.
- `ValueColor` — The background color of the crosshair _Y_ axis labels.
- `ValueLineThickness` — The thickness of the crosshair value line.
- `ValueTextColor` — The foreground (text) color of the crosshair _Y_ axis labels.
The following XAML code demonstrates how to customize these settings for a sample chart control. The crosshair line thickness is set to 3. The crosshair labels have a gray background, but different text colors: yellow for the _X_-axis labels and cyan for the _Y_-axis labels.
``` xml
```