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.

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