How to add crosshair in .NET-MAUI SfCartesianChart and its customization

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.

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

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.

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

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

[XAML]

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

[C#]

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.

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

Output

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

Troubleshooting

If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.

For a step-by-step procedure, refer to the How to add crosshair lines in the .NET MAUI Chart(SfCartesianChart)? KB article.