Crosshair in .NET MAUI Chart

25 Mar 20268 minutes to read

Crosshair allows you to view exact values on the chart by showing vertical and horizontal lines at the interaction point. These lines help you read the corresponding axis values clearly. On mobile, long‑press the chart to show the crosshair and drag to change its position. On desktop, move the cursor over the chart area to display the crosshair.

Enable Crosshair

To enable the crosshair in the chart, create an instance of the ChartCrosshairBehavior and set it to the CrosshairBehavior property of SfCartesianChart.

XAML

<chart:SfCartesianChart>
    ...
    <chart:SfCartesianChart.CrosshairBehavior>
        <chart:ChartCrosshairBehavior/>
    </chart:SfCartesianChart.CrosshairBehavior>
    ...
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
...
ChartCrosshairBehavior crosshair = new ChartCrosshairBehavior();
chart.CrosshairBehavior = crosshair;
...
this.Content = chart;

Show Crosshair axis labels

To view the axis labels then set the ShowTrackballLabel property to true as shown in the below code snippet. The default value of the ChartAxis.ShowTrackballLabel is False.

XAML

<chart:SfCartesianChart>
    ...
    <chart:SfCartesianChart.CrosshairBehavior>
        <chart:ChartCrosshairBehavior/>
    </chart:SfCartesianChart.CrosshairBehavior> 
   
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis ShowTrackballLabel="True"/>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis ShowTrackballLabel="True"/>
    </chart:SfCartesianChart.YAxes>
    ...
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
...
ChartCrosshairBehavior crosshair = new ChartCrosshairBehavior();
chart.CrosshairBehavior = crosshair;

CategoryAxis chartXAxis = new CategoryAxis()
{
    ShowTrackballLabel = true
};

NumericalAxis chartYAxis = new NumericalAxis()
{
    ShowTrackballLabel = true
};
chart.XAxes.Add(chartXAxis);
chart.YAxes.Add(chartYAxis);
...
this.Content = chart;

Vertical and Horizontal Line Customization

When you add the ChartCrosshairBehavior to a chart, horizontal and vertical lines appear. These lines can be customized individually using the HorizontalLineStyle and VerticalLineStyle properties.

The appearance of the track line in crosshair can be customized using the following properties.

• StrokeWidth, of type double, used to change the stroke width of the line.
• Stroke, of type Brush, used to change the stroke color of the line.
• StrokeDashArray, of type DoubleCollection, specifies the dashes to be applied on the line.

HorizontalLineStyle

The following code snippet demonstrates how to configure the line style for the horizontal line in the crosshair.

XAML

<chart:SfCartesianChart>
    . . .
    <chart:SfCartesianChart.CrosshairBehavior>
        <chart:ChartCrosshairBehavior>
            <chart:ChartCrosshairBehavior.HorizontalLineStyle>
                 <chart:ChartLineStyle 
                    Stroke="Red" 
                    StrokeWidth="1.5"
                    StrokeDashArray="2,2"/>
            </chart:ChartCrosshairBehavior.HorizontalLineStyle>
        </chart:ChartCrosshairBehavior>
    </chart:SfCartesianChart.CrosshairBehavior>
    ...
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
...
ChartCrosshairBehavior crosshair = new ChartCrosshairBehavior();
chart.CrosshairBehavior = crosshair;

DoubleCollection doubleCollection = new DoubleCollection();
doubleCollection.Add(2);
doubleCollection.Add(2);

ChartLineStyle horizontalLineStyle = new ChartLineStyle()
{
    Stroke = Colors.Red,
    StrokeWidth = 1.5,
    StrokeDashArray = doubleCollection
};
crosshair.HorizontalLineStyle = horizontalLineStyle;
...
this.Content = chart;

VerticalLineStyle

The following code snippet demonstrates how to configure the line style for the vertical line in the crosshair.

XAML

<chart:SfCartesianChart>
    . . .
    <chart:SfCartesianChart.CrosshairBehavior>
        <chart:ChartCrosshairBehavior>
            <chart:ChartCrosshairBehavior.VerticalLineStyle>
                 <chart:ChartLineStyle 
                    Stroke="Blue" 
                    StrokeWidth="2"
                    StrokeDashArray="5,3"/>
            </chart:ChartCrosshairBehavior.VerticalLineStyle>
        </chart:ChartCrosshairBehavior>
    </chart:SfCartesianChart.CrosshairBehavior>
    ...
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
...
ChartCrosshairBehavior crosshair = new ChartCrosshairBehavior();
chart.CrosshairBehavior = crosshair;

DoubleCollection doubleCollection = new DoubleCollection();
doubleCollection.Add(5);
doubleCollection.Add(3);

ChartLineStyle verticalLineStyle = new ChartLineStyle()
{
    Stroke = Colors.Blue,
    StrokeWidth = 2,
    StrokeDashArray = doubleCollection
};
crosshair.VerticalLineStyle = verticalLineStyle;
...
this.Content = chart;

Crosshair Axis Labels Customization

The LabelStyle property allows you to customize the appearance of crosshair axis labels. These options are:

• Background, of type Brush, used to change the label background color.
• Margin, of type Thickness, used to change the margin of the label.
• TextColor, of type Color, used to change the text color.
• StrokeWidth, of type double, used to change the stroke thickness of the label.
• Stroke, of type Brush, used to customize the border of the label.
• LabelFormat, of type string, used to change the format of the label.
• FontFamily, of type string, used to change the font family for the trackball label.
• FontAttributes, of type FontAttributes, used to change the font style for the trackball label.
• FontSize, of type double, used to change the font size for the trackball label.
• CornerRadius, of type CornerRadius, used to set the rounded corners for labels.

XAML

<chart:SfCartesianChart>
    ...
    <chart:CategoryAxis>
        <chart:CategoryAxis.TrackballLabelStyle>
            <chart:ChartAxisLabelStyle Background="LightBlue"   
                                       FontSize="15" 
                                       CornerRadius="5"
                                       StrokeWidth="2" 
                                       Stroke="Gray"/>
        </chart:CategoryAxis.TrackballLabelStyle>
    </chart:CategoryAxis>
    ...
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
. . .
ChartCrosshairBehavior crosshair = new ChartCrosshairBehavior();
chart.CrosshairBehavior = crosshair;

CategoryAxis categoryAxis = new CategoryAxis();
ChartAxisLabelStyle axisLabelStyle = new ChartAxisLabelStyle()
{
    Background = Colors.LightBlue,
    FontSize = 15,
    CornerRadius = 5,
    StrokeWidth = 2,
    Stroke = Colors.Gray
};
categoryAxis.TrackballLabelStyle = axisLabelStyle;
. . .
this.Content = chart;