menu

WinUI

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class ChartCrosshairBehavior - WinUI API Reference | Syncfusion

    Show / Hide Table of Contents

    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>
        SfCartesianChart chart = new SfCartesianChart();
    
        // omitted for brevity
        DoubleCollection doubleCollection = new DoubleCollection();
        doubleCollection.Add(5);
        doubleCollection.Add(3);
        var lineStyle = new Style() { TargetType = typeof(Line) };
        lineStyle.Setters.Add(new Setter(Path.StrokeProperty, new SolidColorBrush(Colors.Red)));
        lineStyle.Setters.Add(new Setter(Path.StrokeDashArrayProperty, doubleCollection));
        chart.CrosshairBehavior = new ChartCrosshairBehavior()
        {
           HorizontalLineStyle = lineStyle,
        };

    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>
        SfCartesianChart chart = new SfCartesianChart();
    
        // omitted for brevity
        DoubleCollection doubleCollection = new DoubleCollection();
        doubleCollection.Add(5);
        doubleCollection.Add(3);
        var lineStyle = new Style() { TargetType = typeof(Line) };
        lineStyle.Setters.Add(new Setter(Path.StrokeProperty, new SolidColorBrush(Colors.Red)));
        lineStyle.Setters.Add(new Setter(Path.StrokeDashArrayProperty, doubleCollection));
        chart.CrosshairBehavior = new ChartCrosshairBehavior()
        {
           VerticalLineStyle = lineStyle,
        };

    ShowTrackballLabel

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

    • Xaml
    • C#
        <chart:SfCartesianChart>
    
              <chart:SfCartesianChart.XAxes>
                  <chart:NumericalAxis ShowTrackballLabel="True"/>
              </chart:SfCartesianChart.XAxes>
    
              <chart:SfCartesianChart.YAxes>
                  <chart:NumericalAxis ShowTrackballLabel="True"/>
              </chart:SfCartesianChart.YAxes>
    
              <chart:SfCartesianChart.CrosshairBehavior>
                  <chart:ChartCrosshairBehavior />
              </chart:SfCartesianChart.CrosshairBehavior>
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
    
        NumericalAxis xAxis = new NumericalAxis();
        xAxis.ShowTrackballLabel = true;
        NumericalAxis yAxis = new NumericalAxis();
        yAxis.ShowTrackballLabel = true;
    
        chart.XAxes.Add(xAxis);
        chart.YAxes.Add(yAxis);
    
        chart.CrosshairBehavior = new ChartCrosshairBehavior();

    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 ShowTrackballLabel="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 ShowTrackballLabel="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
    Microsoft.UI.Xaml.DependencyProperty

    HorizontalLineStyleProperty

    The DependencyProperty for HorizontalLineStyle property.

    Declaration
    public static readonly DependencyProperty HorizontalLineStyleProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    VerticalAxisLabelAlignmentProperty

    The DependencyProperty for VerticalAxisLabelAlignment property.

    Declaration
    public static readonly DependencyProperty VerticalAxisLabelAlignmentProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    VerticalLineStyleProperty

    The DependencyProperty for VerticalLineStyle property.

    Declaration
    public static readonly DependencyProperty VerticalLineStyleProperty
    Field Value
    Type
    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>
        SfCartesianChart chart = new SfCartesianChart();
    
        // omitted for brevity
        chart.CrosshairBehavior = new ChartCrosshairBehavior()
        {
           HorizontalAxisLabelAlignment = ChartAlignment.Near,
        };

    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>
        SfCartesianChart chart = new SfCartesianChart();
    
        // omitted for brevity
        DoubleCollection doubleCollection = new DoubleCollection(){ 5, 2 };
        var lineStyle = new Style() { TargetType = typeof(Line) };
        lineStyle.Setters.Add(new Setter(Path.StrokeProperty, new SolidColorBrush(Colors.Red)));
        lineStyle.Setters.Add(new Setter(Path.StrokeDashArrayProperty, doubleCollection));
        chart.CrosshairBehavior = new ChartCrosshairBehavior()
        {
           HorizontalLineStyle = lineStyle,
        };

    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>
        SfCartesianChart chart = new SfCartesianChart();
    
        // omitted for brevity
        chart.CrosshairBehavior = new ChartCrosshairBehavior()
        {
           VerticalAxisLabelAlignment = ChartAlignment.Near,
        };

    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>
        SfCartesianChart chart = new SfCartesianChart();
    
        // omitted for brevity
        DoubleCollection doubleCollection = new DoubleCollection(){ 5, 2 };
        var lineStyle = new Style() { TargetType = typeof(Line) };
        lineStyle.Setters.Add(new Setter(Path.StrokeProperty, new SolidColorBrush(Colors.Red)));
        lineStyle.Setters.Add(new Setter(Path.StrokeDashArrayProperty, doubleCollection));
        chart.CrosshairBehavior = new ChartCrosshairBehavior()
        {
           VerticalLineStyle = lineStyle,
        };

    Methods

    OnHolding(HoldingRoutedEventArgs)

    Declaration
    protected override void OnHolding(HoldingRoutedEventArgs e)
    Parameters
    Type Name Description
    Microsoft.UI.Xaml.Input.HoldingRoutedEventArgs e
    Overrides
    ChartBehavior.OnHolding(HoldingRoutedEventArgs)

    OnLayoutUpdated()

    Declaration
    protected override void OnLayoutUpdated()
    Overrides
    ChartBehavior.OnLayoutUpdated()

    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)
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved