How to add crosshair lines in the .NET MAUI Chart (SfCartesianChart)?
In this article, we will guide you on how to add crosshair lines to .NET MAUI Chart (SfCartesianChart), making it easier for users to analyze data. This can be achieved in two ways, which are explained below.
Method 1: Adding Crosshair Lines using GraphicsView and ChartInteractiveBehavior
In this method, we add crosshair lines to the .NET MAUI Chart (SfCartesianChart) by using GraphicsView and ChartInteractiveBehavior.This approach allows users to interact with the chart and view crosshair lines as they move across the plot area.
Step 1: Set Up CrossHairBehavior Class
We’ll create a custom class named CrossHairBehavior that inherits from GraphicsView and implements the IDrawable interface. This class will handle the logic for drawing crosshair lines on the chart.
[C#]
public class CrossHairBehavior : GraphicsView, IDrawable
{
public CrossHairBehavior()
{
Drawable = this;
}
public void Draw(ICanvas canvas, RectF dirtyRect)
{
}
}
Step 2: Define Crosshair Properties
Within the CrossHairBehavior class, we define properties such as ShowCrossHair to control the visibility of the crosshair lines and PointF variables to store the coordinates of the crosshair lines.
[C#]
public class CrossHairBehavior : GraphicsView, IDrawable
{
private bool isTouchActive = false;
private PointF CrossHairX1;
private PointF CrossHairX2;
private PointF CrossHairY1;
private PointF CrossHairY2;
// Define BindableProperty for controlling crosshair visibility
public static readonly BindableProperty ShowCrossHairProperty = BindableProperty.Create(nameof(ShowCrossHair), typeof(bool), typeof(CrossHairBehavior), false, BindingMode.Default, null);
public bool ShowCrossHair
{
get { return (bool)GetValue(ShowCrossHairProperty); }
set { SetValue(ShowCrossHairProperty, value); }
}
}
Step 3: Handle Touch Events
Implement methods to handle touch events (OnTouchDown, OnTouchMove, and OnTouchUp) to track the position of the user’s touch on the chart and update the crosshair accordingly.
[C#]
public class CrossHairBehavior : GraphicsView, IDrawable
{
public void OnTouchMove(ChartBase chart, float pointX, float pointY)
{
isTouchActive = true;
CalculateCrossHairPoints(chart, pointX, pointY);
Invalidate();
}
public void OnTouchUp(ChartBase chart, float pointX, float pointY)
{
isTouchActive = false;
Invalidate();
}
}
Step 4: Add CrossHair in SfCartesianChart
By adding the CrossHairBehavior directly to the PlotAreaBackgroundView of the SfCartesianChart, we can seamlessly integrate crosshair functionality into the SfCartesianChart.
[XAML]
<chart:SfCartesianChart>
<chart:SfCartesianChart.PlotAreaBackgroundView>
<crossHair:CrossHairBehavior ShowCrossHair="True"/>
</chart:SfCartesianChart.PlotAreaBackgroundView>
</chart:SfCartesianChart>
Step 5: Create CrossHairInteractiveBehavior class
In addition to the CrossHairBehavior class, we’ll create another custom class named CrossHairInteractiveBehavior. This class inherits from ChartInteractiveBehavior and is responsible for handling touch events on the chart and delegating the touch event handling to the CrossHairBehavior class.
Override the OnTouchDown, OnTouchMove, and OnTouchUp methods of the ChartInteractiveBehavior class to intercept touch events on the chart and pass them to the CrossHairBehavior class for further processing.
[C#]
public class CrossHairInteractiveBehavior : ChartInteractiveBehavior
{
protected override void OnTouchMove(ChartBase chart, float pointX, float pointY)
{
if (chart is SfCartesianChart cartesianChart && cartesianChart.PlotAreaBackgroundView is CrossHairBehavior crossHairBehavior)
{
crossHairBehavior.OnTouchMove(cartesianChart, pointX, pointY);
}
}
protected override void OnTouchUp(ChartBase chart, float pointX, float pointY)
{
if (chart is SfCartesianChart cartesianChart && cartesianChart.PlotAreaBackgroundView is CrossHairBehavior crossHairBehavior)
{
crossHairBehavior.OnTouchUp(cartesianChart, pointX, pointY);
}
}
}
Step 6: Configure CrossHairInteractiveBehavior Class with SfCartesianChart
We include the CrossHairInteractiveBehavior within the ChartInteractiveBehavior collection. This configuration ensures that touch events on the chart are intercepted by the CrossHairInteractiveBehavior class, which in turn delegates them to the CrossHairBehavior class for handling the crosshair functionality.
[XAML]
<chart:SfCartesianChart>
. . .
<chart:SfCartesianChart.PlotAreaBackgroundView>
<crossHair:CrossHairBehavior ShowCrossHair="True"/>
</chart:SfCartesianChart.PlotAreaBackgroundView>
<chart:SfCartesianChart.InteractiveBehavior>
<crossHair:CrossHairInteractiveBehavior/>
</chart:SfCartesianChart.InteractiveBehavior>
. . .
</chart:SfCartesianChart>
Output
Method 2: Adding Crosshair Lines using Annotations and ChartInteractiveBehavior
Step 1: Set Up CrossHairInteractiveBehavior Class
The first step is to create the CrossHairInteractiveBehavior class that will inherit from ChartInteractiveBehavior. This class will be responsible for handling the interactive behavior, such as tracking touch movement on the chart.
[C#]
public class CrossHairInteractiveBehavior : ChartInteractiveBehavior
{
// Define an event based on the delegate
public event TouchMoveEventHandler TouchMoveEvent;
}
Step 2: Create the TouchMoveEventArgs Class and Delegate
Next, we create the TouchMoveEventArgs class that will hold the data for the touch event. This class will contain the PointX and PointY properties, representing the touch coordinates.
[C#]
public class CrossHairInteractiveBehavior : ChartInteractiveBehavior
{
public delegate void TouchMoveEventHandler(object sender, TouchMoveEventArgs e);
// Define an event based on the delegate
public event TouchMoveEventHandler TouchMoveEvent;
}
public class TouchMoveEventArgs : EventArgs
{
public float PointX { get; }
public float PointY { get; }
public TouchMoveEventArgs(float pointX, float pointY)
{
PointX = pointX;
PointY = pointY;
}
}
Step 3: Use the TouchMoveEvent in the OnTouchMove Method
Next step is to override the OnTouchMove method from the ChartInteractiveBehavior class to trigger the TouchMoveEvent. This method is called when a touch move event occurs, and it will invoke the TouchMoveEvent with the updated touch coordinates.
[C#]
public class CrossHairInteractiveBehavior : ChartInteractiveBehavior
{
public delegate void TouchMoveEventHandler(object sender, TouchMoveEventArgs e);
// Define an event based on the delegate
public event TouchMoveEventHandler TouchMoveEvent;
protected override void OnTouchMove(ChartBase chart, float pointX, float pointY)
{
base.OnTouchMove(chart, pointX, pointY);
TouchMoveEvent?.Invoke(this, new TouchMoveEventArgs(pointX, pointY));
}
}
Step 4: Create the Chart with Annotations
Now, create a chart using .NET MAUI Chart (SfCartesianChart) with one VerticalLineAnnotation and one HorizontalLineAnnotation to simulate the crosshair effect.
[XAML]
<chart:SfCartesianChart x:Name="chart">
...
<chart:SfCartesianChart.Annotations>
<chart:HorizontalLineAnnotation x:Name="Horizontal" ShowAxisLabel="False">
<chart:HorizontalLineAnnotation.AxisLabelStyle>
<chart:ChartAxisLabelStyle Background="Orange"></chart:ChartAxisLabelStyle>
</chart:HorizontalLineAnnotation.AxisLabelStyle>
</chart:HorizontalLineAnnotation>
<chart:VerticalLineAnnotation x:Name="Vertical" ShowAxisLabel="False">
<chart:VerticalLineAnnotation.AxisLabelStyle>
<chart:ChartAnnotationLabelStyle LabelFormat="0.##" Background="Orange"/>
</chart:VerticalLineAnnotation.AxisLabelStyle>
</chart:VerticalLineAnnotation>
</chart:SfCartesianChart.Annotations>
...
</chart:SfCartesianChart>
Step 5: Configure CrossHairInteractiveBehavior class with SfCartesianChart
In this step, we will add the CrossHairInteractiveBehavior to the chart and subscribe to the TouchMoveEvent. This will allow you to update the position of the vertical and horizontal annotations based on touch movements within the chart area.
[XAML]
<chart:SfCartesianChart x:Name="chart">
...
<chart:SfCartesianChart.InteractiveBehavior>
<crossHair:CrossHairInteractiveBehavior TouchMoveEvent="CrossHairInteractiveBehavior_TouchMoveEvent"/>
</chart:SfCartesianChart.InteractiveBehavior>
...
</chart:SfCartesianChart>
[C#]
private void CrossHairInteractiveBehavior_TouchMoveEvent(object sender, TouchMoveEventArgs e)
{
bool inSeriesBounds = chart.SeriesBounds.Contains(e.PointX, e.PointY);
// Show or hide annotations based on whether the touch is within the series bounds
Horizontal.IsVisible = inSeriesBounds;
Vertical.IsVisible = inSeriesBounds;
// Show or hide axis labels based on whether the touch is within the series bounds
Horizontal.ShowAxisLabel = inSeriesBounds;
Vertical.ShowAxisLabel = inSeriesBounds;
// If the touch is within the chart area, update the position of the annotations
if (inSeriesBounds)
{
var x = chart.PointToValue(xAxis, e.PointX, e.PointY); // Get the X-axis value at the touch point
var y = chart.PointToValue(yAxis, e.PointX, e.PointY); // Get the Y-axis value at the touch point
// Update the annotations' positions based on the touch coordinates
Horizontal.Y1 = y;
Vertical.X1 = x;
}
}
Output:
For more details, please refer to the project on GitHub.
Conclusion
I hope you enjoyed about learning how to add crosshair lines in .NET MAUI Chart (SfCartesianChart).
You can refer to our .NET MAUI Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also 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 following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!