How to add crosshair lines in the .NET MAUI Chart (SfCartesianChart)?

In this article, we will demonstrate how to add a crosshair to the .NET MAUI Chart (SfCartesianChart) and how to customize it for better data analysis.

A crosshair helps users to identify exact data values by displaying vertical and horizontal lines at the interaction point. On mobile devices, long‑press the chart to display the crosshair and drag to adjust its position. On desktop, simply move the cursor over the chart area to view the crosshair.

The following steps explain how to add a crosshair to the Cartesian chart.

Step 1: Configure the SfCartesianChart

Begin by setting up the Syncfusion® .NET MAUI SfCartesianChart in your application. If this is your first time using the chart, refer to the Syncfusion Getting Started documentation to configure the chart with the necessary data, axes, and basic elements.

Step 2: Enable the Crosshair

To enable the crosshair in the chart, create an instance of ChartCrosshairBehavior and assign it to the CrosshairBehavior property of the SfCartesianChart. This activates the crosshair overlay, allowing users to view precise values when interacting with the chart.

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

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

Step 3: Show Crosshair Axis Labels

To display axis labels when the crosshair is active, set the ShowTrackballLabel property of the corresponding axis to true. By default, the ChartAxis.ShowTrackballLabel property is set to false. Enabling this option allows users to clearly view the exact axis values at the crosshair position.

<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> 

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; 

Output

The following screenshot illustrates how the crosshair appears on the Cartesian chart, helping users easily identify precise data values and corresponding axis labels at the selected interaction point.

Step 4: Customize Crosshair Lines

When ChartCrosshairBehavior is added, vertical and horizontal lines are shown by default. We can customize them using the VerticalLineStyle and HorizontalLineStyle properties. Key properties include:

Stroke – Crosshair line color
StrokeWidth – Crosshair line thickness
StrokeDashArray – Crosshair dashed line pattern

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

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

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

ChartLineStyle horizontalLineStyle = new ChartLineStyle()
{
   Stroke = Colors.Red,
   StrokeWidth = 2,
   StrokeDashArray = doubleCollection1
};

crosshair.HorizontalLineStyle = horizontalLineStyle;

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

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

Step 5: Customize Crosshair Axis Labels

We can customize the appearance of crosshair axis labels using the LabelStyle property.

<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> 

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; 

Output

The following screenshot demonstrates the result of the axis label and line customization applied to the crosshair in the Cartesian chart.

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to add crosshair to the .NET MAUI Chart (SfCartesianChart) and its customization.We can refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!