Class ChartCrosshairBehavior

Enables a crosshair overlay for a Cartesian chart. Draws vertical and horizontal guide lines at the user interaction position and shows axis labels (trackball-style) for precise value inspection.

Inheritance

System.Object

ChartBehavior

ChartCrosshairBehavior

Inherited Members

ChartBehavior.OnTouchDown(ChartBase, Single, Single)

Namespace: Syncfusion.Maui.Charts

Assembly: Syncfusion.Maui.Charts.dll

Syntax

public class ChartCrosshairBehavior : ChartBehavior

Remarks

The crosshair overlay displays information while long press or mouse hovering on the chart plot area.

To display the crosshair lines on the chart, you need to create instance the ChartCrosshairBehavior property and set it to the chartâ€™s CrosshairBehavior property.

To display the crosshair labels on the chart, you need to set the ShowTrackballLabel property as true in chart axis.

Crosshair behavior provides the following options to customize the appearance of the crosshair line and label:

Label Customization - To customize the appearance of the crosshair label, refer to the Background, FontAttributes, FontFamily, FontSize, LabelFormat, Margin, StrokeWidth, Stroke and TextColor properties.

Vertical Line Customization - To customize the appearance of the vertical crosshair line, refer to the StrokeWidth, Stroke and StrokeDashArray properties.

Horizontal Line Customization - To customize the appearance of the horizontal crosshair line, refer to the StrokeWidth, Stroke and StrokeDashArray properties.

    <chart:SfCartesianChart>

       <chart:SfCartesianChart.XAxes>
          <chart:CategoryAxis ShowTrackballLabel = "True">
            <chart:CategoryAxis.TrackballLabelStyle>
               <chart:ChartLabelStyle Background = "Black" TextColor="White"/>
            </chart:CategoryAxis.TrackballLabelStyle>
          </chart:CategoryAxis>
       </chart:SfCartesianChart.XAxes>

       <chart:SfCartesianChart.CrosshairBehavior>

          <chart:ChartCrosshairBehavior>

             <chart:ChartCrosshairBehavior.VerticalLineStyle>
                 <chart:ChartLineStyle Stroke = "Red" StrokeWidth="2"/>
             </chart:ChartCrosshairBehavior.VerticalLineStyle>

             <chart:ChartCrosshairBehavior.HorizontalLineStyle>
                 <chart:ChartLineStyle Stroke = "Green" StrokeWidth="2"/>
              </chart:ChartCrosshairBehavior.HorizontalLineStyle>

          </chart:ChartCrosshairBehavior>

       </chart:SfCartesianChart.CrosshairBehavior>

       <!--omitted for brevity-->

    </chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

// omitted for brevity 

var trackballLabelStyle = new ChartLabelStyle()
{ 
    Background = new SolidColorBrush(Colors.Black),
    TextColor = Colors.White,
};

var verticalLineStyle = new ChartLineStyle()
{
    Stroke = new SolidColorBrush(Colors.Red), StrokeWidth = 2,
};

var horizontalLineStyle = new ChartLineStyle()
{
    Stroke = new SolidColorBrush(Colors.Green), StrokeWidth = 2,
};

CategoryAxis xaxis = new CategoryAxis()
{
   ShowTrackballLabel = true,
   TrackballLabelStyle = trackballLabelStyle,
};

chart.XAxes.Add(xaxis);

var crosshairBehavior = new ChartCrosshairBehavior() 
{
    VerticalLineStyle = verticalLineStyle,
    HorizontalLineStyle = horizontalLineStyle
};

chart.CrosshairBehavior = crosshairBehavior;

Constructors

ChartCrosshairBehavior()

Initializes a new instance of the ChartCrosshairBehavior class.

Declaration

public ChartCrosshairBehavior()

Fields

HorizontalLineStyleProperty

Identifies the HorizontalLineStyle bindable property.

Declaration

public static readonly BindableProperty HorizontalLineStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

VerticalLineStyleProperty

Identifies the VerticalLineStyle bindable property.

Declaration

public static readonly BindableProperty VerticalLineStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Properties

HorizontalLineStyle

Gets or sets the style used to draw the horizontal crosshair line.

Declaration

public ChartLineStyle HorizontalLineStyle { get; set; }

Property Value

Type
ChartLineStyle

Examples

Xaml
C#

    <chart:SfCartesianChart>

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

       <chart:SfCartesianChart.CrosshairBehavior>

          <chart:ChartCrosshairBehavior>

             <chart:ChartCrosshairBehavior.HorizontalLineStyle>
                 <chart:ChartLineStyle Stroke = "Green" StrokeWidth="2"/>
             </chart:ChartCrosshairBehavior.HorizontalLineStyle>

          </chart:ChartCrosshairBehavior>

       </chart:SfCartesianChart.CrosshairBehavior>

       <!--omitted for brevity-->

    </chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

// omitted for brevity 

var horizontalLineStyle = new ChartLineStyle()
{
    Stroke = new SolidColorBrush(Colors.Green), StrokeWidth = 2,
};

CategoryAxis xaxis = new CategoryAxis()
{
   ShowTrackballLabel = true,
};

chart.XAxes.Add(xaxis);

var crosshairBehavior = new ChartCrosshairBehavior() 
{
    HorizontalLineStyle = horizontalLineStyle
};

chart.CrosshairBehavior = crosshairBehavior;

VerticalLineStyle

Gets or sets the style used to draw the vertical crosshair line.

Declaration

public ChartLineStyle VerticalLineStyle { get; set; }

Property Value

Type
ChartLineStyle

Examples

Xaml
C#

    <chart:SfCartesianChart>

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

       <chart:SfCartesianChart.CrosshairBehavior>

          <chart:ChartCrosshairBehavior>

             <chart:ChartCrosshairBehavior.VerticalLineStyle>
                 <chart:ChartLineStyle Stroke = "Red" StrokeWidth="2"/>
             </chart:ChartCrosshairBehavior.VerticalLineStyle>

          </chart:ChartCrosshairBehavior>

       </chart:SfCartesianChart.CrosshairBehavior>

       <!--omitted for brevity-->

    </chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

// omitted for brevity 

var verticalLineStyle = new ChartLineStyle()
{
    Stroke = new SolidColorBrush(Colors.Red), StrokeWidth = 2,
};

CategoryAxis xaxis = new CategoryAxis()
{
   ShowTrackballLabel = true,
};

chart.XAxes.Add(xaxis);

var crosshairBehavior = new ChartCrosshairBehavior() 
{
    VerticalLineStyle = verticalLineStyle,
};

chart.CrosshairBehavior = crosshairBehavior;

Methods

OnBindingContextChanged()

Declaration

protected override void OnBindingContextChanged()

OnParentSet()

Declaration

protected override void OnParentSet()

OnTouchMove(ChartBase, Single, Single)

This Method is triggered when a touch point is moved along the touch surface.

Declaration

protected override void OnTouchMove(ChartBase chart, float pointX, float pointY)

Parameters

Type	Name	Description
ChartBase	chart
System.Single	pointX
System.Single	pointY

Overrides

ChartBehavior.OnTouchMove(ChartBase, Single, Single)

Remarks

Use the provided points X and Y to determine the exact location of the touch.

You can use these coordinates to define the desired actions to be executed when navigating the touch point across the chart area.

Example code:

Convert the touch coordinates to value coordinates if needed.

 
chart.ChartPointToValue(xAxis, pointY);

Show a tooltip with information about the data point.

tooltipBehavior.Show(pointX, pointY);

OnTouchUp(ChartBase, Single, Single)

This method is triggered when a touch event comes to an end. It is used to finalize the action initiated by the OnTouchDown(ChartBase, Single, Single).

Declaration

protected override void OnTouchUp(ChartBase chart, float pointX, float pointY)

Parameters

Type	Name	Description
ChartBase	chart
System.Single	pointX
System.Single	pointY

Overrides

ChartBehavior.OnTouchUp(ChartBase, Single, Single)

Remarks

Use the provided points X and Y to determine the exact location of the touch.

You can use these coordinates to interact with the chart, such as highlighting data points, hiding tooltips, or performing other actions when the touch is released.

Example code:

Convert the touch coordinates to value coordinates if needed.

 
chart.ChartPointToValue(xAxis, pointY);

Hide a tooltip with information about the data point.

tooltipBehavior.Hide(pointX, pointY);