Class ChartCrosshairBehavior

ChartCrosshairBehavior enables viewing of information related to chart coordinates at the mouse hover position or at the touch contact point inside a chart.

Inheritance

System.Object

ChartBehavior

ChartCrosshairBehavior

Inherited Members

ChartBehavior.OnDoubleTapped(DoubleTappedRoutedEventArgs)

ChartBehavior.OnManipulationCompleted(ManipulationCompletedRoutedEventArgs)

ChartBehavior.OnManipulationDelta(ManipulationDeltaRoutedEventArgs)

ChartBehavior.OnManipulationStarted(ManipulationStartedRoutedEventArgs)

ChartBehavior.OnPointerEntered(PointerRoutedEventArgs)

ChartBehavior.OnPointerWheelChanged(PointerRoutedEventArgs)

ChartBehavior.OnRightTapped(RightTappedRoutedEventArgs)

ChartBehavior.OnTapped(TappedRoutedEventArgs)

Namespace: Syncfusion.UI.Xaml.Charts

Assembly: Syncfusion.Chart.WinUI.dll

Syntax

public class ChartCrosshairBehavior : ChartBehavior

Remarks

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

ChartCrosshairBehavior displays a vertical line, horizontal line, and a popup-like control displaying information about the data point at the touch contact point or at the mouse hover position.

It provides options to customize the appearance of vertical and horizontal lines.

HorizontalLineStyle

It is used to change the look of the horizontal line in the Crosshair.

• Xaml
• C#

    <chart:SfCartesianChart>

          <!--omitted for brevity-->

          <chart:SfCartesianChart.CrosshairBehavior>
              <chart:ChartCrosshairBehavior>
                  <chart:ChartCrosshairBehavior.HorizontalLineStyle>
                      <Style TargetType="Line">
                          <Setter Property="StrokeDashArray" Value="5,2"/>
                          <Setter Property="Stroke" Value="Red"/>
                  </Style>
               </chart:ChartCrosshairBehavior.HorizontalLineStyle>
           </chart:ChartCrosshairBehavior>
          </chart:SfCartesianChart.CrosshairBehavior>

    </chart:SfCartesianChart>

VerticalLineStyle

It is used to change the look of the vertical line in the Crosshair.

• Xaml
• C#

    <chart:SfCartesianChart>

          <!--omitted for brevity-->

          <chart:SfCartesianChart.CrosshairBehavior>
              <chart:ChartCrosshairBehavior>
                  <chart:ChartCrosshairBehavior.VerticalLineStyle>
                      <Style TargetType="Line">
                          <Setter Property="StrokeDashArray" Value="5,2"/>
                          <Setter Property="Stroke" Value="Red"/>
                  </Style>
               </chart:ChartCrosshairBehavior.VerticalLineStyle>
           </chart:ChartCrosshairBehavior>
          </chart:SfCartesianChart.CrosshairBehavior>

    </chart:SfCartesianChart>

ShowTrackballInfo

The axis label will be viewed when the ShowTrackballInfo property is set to true. The default value of ShowTrackballInfo is false

• Xaml
• C#

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis ShowTrackballInfo="True"/>
          </chart:SfCartesianChart.XAxes>

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

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

    </chart:SfCartesianChart>

CrosshairLabelTemplate

The appearance of the crosshair axis labels can be customized by using the CrosshairLabelTemplate property of chart axis.

• Xaml

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis ShowTrackballInfo="True">
               <chart:NumericalAxis.CrosshairLabelTemplate>
                   <DataTemplate>
                       <Border Background = "Orange" CornerRadius="4"    
                               BorderThickness="1" BorderBrush="Black">
                           <TextBlock Margin = "2" Text="{Binding ValueX}"/>
                       </Border>
                   </DataTemplate>
               </chart:NumericalAxis.CrosshairLabelTemplate>
           </chart:NumericalAxis>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis ShowTrackballInfo="True">
               <chart:NumericalAxis.CrosshairLabelTemplate>
                   <DataTemplate>
                       <Border Background = "Orange" CornerRadius="4"    
                               BorderThickness="1" BorderBrush="Black">
                           <TextBlock Margin = "2" Text="{Binding ValueY}"/>
                       </Border>
                   </DataTemplate>
               </chart:NumericalAxis.CrosshairLabelTemplate>
           </chart:NumericalAxis>
          </chart:SfCartesianChart.YAxes>

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

    </chart:SfCartesianChart>

Note: This is only applicable for SfCartesianChart.

Constructors

ChartCrosshairBehavior()

Initializes a new instance of the ChartCrosshairBehavior class.

Declaration

public ChartCrosshairBehavior()

Fields

HorizontalAxisLabelAlignmentProperty

The DependencyProperty for HorizontalAxisLabelAlignment property.

Declaration

public static readonly DependencyProperty HorizontalAxisLabelAlignmentProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

HorizontalLineStyleProperty

The DependencyProperty for HorizontalLineStyle property.

Declaration

public static readonly DependencyProperty HorizontalLineStyleProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

VerticalAxisLabelAlignmentProperty

The DependencyProperty for VerticalAxisLabelAlignment property.

Declaration

public static readonly DependencyProperty VerticalAxisLabelAlignmentProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

VerticalLineStyleProperty

The DependencyProperty for VerticalLineStyle property.

Declaration

public static readonly DependencyProperty VerticalLineStyleProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

Properties

HorizontalAxisLabelAlignment

Gets or sets the ChartAlignment for the label appearing in the horizontal axis.

Declaration

public ChartAlignment HorizontalAxisLabelAlignment { get; set; }

Property Value

Type	Description
ChartAlignment	This property takes the ChartAlignment value and its default value is Center.

Examples

• Xaml
• C#

    <chart:SfCartesianChart>

          <!--omitted for brevity-->

          <chart:SfCartesianChart.CrosshairBehavior>
              <chart:ChartCrosshairBehavior HorizontalAxisLabelAlignment="Near"/>
          </chart:SfCartesianChart.CrosshairBehavior>

    </chart:SfCartesianChart>

HorizontalLineStyle

Gets or sets the style that can be used to customize the appearance of the horizontal line.

Declaration

public Style HorizontalLineStyle { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Style	It takes Microsoft.UI.Xaml.Style value.

Examples

• Xaml
• C#

    <chart:SfCartesianChart>

          <!--omitted for brevity-->

          <chart:SfCartesianChart.CrosshairBehavior>
              <chart:ChartCrosshairBehavior>
                  <chart:ChartCrosshairBehavior.HorizontalLineStyle>
                      <Style TargetType="Line">
                          <Setter Property="StrokeDashArray" Value="5,2"/>
                          <Setter Property="Stroke" Value="Red"/>
                  </Style>
               </chart:ChartCrosshairBehavior.HorizontalLineStyle>
           </chart:ChartCrosshairBehavior>
          </chart:SfCartesianChart.CrosshairBehavior> 

    </chart:SfCartesianChart>

VerticalAxisLabelAlignment

Gets or sets the ChartAlignment for the label appearing in vertical axis.

Declaration

public ChartAlignment VerticalAxisLabelAlignment { get; set; }

Property Value

Type	Description
ChartAlignment	This property takes the ChartAlignment value and its default value is Center.

Examples

• Xaml
• C#

    <chart:SfCartesianChart>

          <!--omitted for brevity-->

          <chart:SfCartesianChart.CrosshairBehavior>
              <chart:ChartCrosshairBehavior VerticalAxisLabelAlignment="Near"/>
          </chart:SfCartesianChart.CrosshairBehavior>

    </chart:SfCartesianChart>

VerticalLineStyle

Gets or sets the style that can be used to customize the appearance of vertical line.

Declaration

public Style VerticalLineStyle { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Style	It takes Microsoft.UI.Xaml.Style value.

Examples

• Xaml
• C#

    <chart:SfCartesianChart>

          <!--omitted for brevity-->

          <chart:SfCartesianChart.CrosshairBehavior>
              <chart:ChartCrosshairBehavior>
                  <chart:ChartCrosshairBehavior.VerticalLineStyle>
                      <Style TargetType="Line">
                          <Setter Property="StrokeDashArray" Value="5,2"/>
                          <Setter Property="Stroke" Value="Red"/>
                  </Style>
               </chart:ChartCrosshairBehavior.VerticalLineStyle>
           </chart:ChartCrosshairBehavior>
          </chart:SfCartesianChart.CrosshairBehavior>

    </chart:SfCartesianChart>

Methods

OnHolding(HoldingRoutedEventArgs)

Declaration

protected override void OnHolding(HoldingRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.HoldingRoutedEventArgs	e

Overrides

ChartBehavior.OnHolding(HoldingRoutedEventArgs)

OnPointerExited(PointerRoutedEventArgs)

Declaration

protected override void OnPointerExited(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

Overrides

ChartBehavior.OnPointerExited(PointerRoutedEventArgs)

OnPointerMoved(PointerRoutedEventArgs)

Declaration

protected override void OnPointerMoved(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

Overrides

ChartBehavior.OnPointerMoved(PointerRoutedEventArgs)

OnPointerPressed(PointerRoutedEventArgs)

Declaration

protected override void OnPointerPressed(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

Overrides

ChartBehavior.OnPointerPressed(PointerRoutedEventArgs)

OnPointerReleased(PointerRoutedEventArgs)

Declaration

protected override void OnPointerReleased(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

Overrides

ChartBehavior.OnPointerReleased(PointerRoutedEventArgs)