Crosshair in WinUI Chart

24 May 202211 minutes to read

ChartCrosshairBehavior is used to view the values at mouse point or touch contact point. You can get the X values by moving these lines horizontally, and the Y values by moving these lines vertically.

Adding CrosshairBehavior to SfChart

You can create a ChartCrosshairBehavior instance and add it to the Behaviors collection.

<syncfusion:SfChart.Behaviors>

<syncfusion:ChartCrosshairBehavior />

</syncfusion:SfChart.Behaviors>
ChartCrosshairBehavior behavior = new ChartCrosshairBehavior();

chart.Behaviors.Add(behavior);

To view the axis labels, set the ShowTrackballInfo property to true, as shown in the following code sample.

<syncfusion:SfChart.PrimaryAxis>

<syncfusion:CategoryAxis  ShowTrackballInfo="True"/>

</syncfusion:SfChart.PrimaryAxis>

<syncfusion:SfChart.SecondaryAxis>

<syncfusion:NumericalAxis  ShowTrackballInfo="True"/>

</syncfusion:SfChart.SecondaryAxis>
ChartCrosshairBehavior behavior = new ChartCrosshairBehavior();

chart.Behaviors.Add(behavior);

chart.PrimaryAxis = new CategoryAxis()
{

    ShowTrackballInfo = true

};

chart.SecondaryAxis = new NumericalAxis()
{

    ShowTrackballInfo = true

};

Crosshair support in WinUI Chart

Crosshair is composed of the following parts:

  1. Vertical and horizontal line

  2. Axis Labels

Vertical and Horizontal Line

You can see horizontal and vertical lines by adding ChartCrosshairBehavior to the chart. The horizontal and vertical lines can be customized using the HorizontalLineStyle and VerticalLineStyle properties.

HorizontalLineStyle

The following code sample demonstrates the line style for horizontal line in cross hair.

<syncfusion:SfChart x:Name="chart">

    <syncfusion:SfChart.Resources>

        <Style TargetType="Line" x:Key="lineStyle">

            <Setter Property="Stroke" Value="Green"></Setter>

            <Setter Property="StrokeThickness" Value="1"></Setter>

        </Style>
                
    </syncfusion:SfChart.Resources>

    <syncfusion:SfChart.Behaviors>

        <syncfusion:ChartCrosshairBehavior HorizontalLineStyle="{StaticResource lineStyle}"/>

    </syncfusion:SfChart.Behaviors>

</syncfusion:SfChart>
ChartCrosshairBehavior Crosshair = new ChartCrosshairBehavior()
{

    HorizontalLineStyle = chart.Resources["lineStyle"] as Style

};

chart.Behaviors.Add(Crosshair);

Crosshair line style in WinUI Chart

VerticalLineStyle

<syncfusion:SfChart x:Name="chart">

    <syncfusion:SfChart.Resources>

        <Style TargetType="Line" x:Key="lineStyle">

            <Setter Property="StrokeDashArray" Value="10,5"/>

            <Setter Property="Stroke" Value="Red"/>

             <Setter Property="StrokeThickness" Value="1"/>

        </Style>
                
    </syncfusion:SfChart.Resources>

     <syncfusion:SfChart.Behaviors>

                <syncfusion:ChartCrosshairBehavior VerticalLineStyle="{StaticResource lineStyle}"/>

    </syncfusion:SfChart.Behaviors>

</syncfusion:SfChart>
ChartCrosshairBehavior Crosshair = new ChartCrosshairBehavior()
{

    VerticalLineStyle = chart.Resources["lineStyle"] as Style

};

chart.Behaviors.Add(Crosshair);

Crosshair line style in WinUI Chart

Horizontal axis label

The vertical line in contact with the x-axes shows the axis label. The horizontal axis label can be aligned using the HorizontalAxisLabelAlignment property.

Axis label can be aligned by Near, Far, Center, and Auto options.

  • Auto – Axis label is aligned in Near/Far positions based on the movement of vertical line.

  • Far - Axis label is positioned far from the position of vertical line in cross hair.

  • Near - Axis label is near to the position of trackball.

  • Center - Axis label is aligned to the center of the vertical line. By default, the axis label will be positioned in center.

The following image demonstrates the horizontal axis label positioned center to the vertical line.

Axis label alignment support for crosshair in WinUI Chart

Far

<syncfusion:SfChart.Behaviors>

<syncfusion:ChartCrosshairBehavior HorizontalAxisLabelAlignment="Far ">

</syncfusion:ChartCrosshairBehavior>

</syncfusion:SfChart.Behaviors>
ChartCrosshairBehavior behavior = new ChartCrosshairBehavior()
{

    HorizontalAxisLabelAlignment = ChartAlignment.Far

};

chart.Behaviors.Add(behavior);

Axis label alignment support for crosshair in WinUI Chart

Near

<syncfusion:SfChart.Behaviors>

<syncfusion:ChartCrosshairBehavior HorizontalAxisLabelAlignment="Near ">

</syncfusion:ChartCrosshairBehavior>

</syncfusion:SfChart.Behaviors>
ChartCrosshairBehavior behavior = new ChartCrosshairBehavior()
{

    HorizontalAxisLabelAlignment = ChartAlignment.Near

};

chart.Behaviors.Add(behavior);

Axis label alignment support for crosshair in WinUI Chart

Vertical axis label

A vertical axis label is displayed when the horizontal line is in contact with x-axis. The label can be aligned using the VerticalAxisLabelAlignment property.

Axis label can be aligned by Near, Far, Center, and Auto options.

The following image demonstrates the horizontal axis label positioned center to the vertical line.

Axis label alignment support for crosshair in WinUI Chart

Near

<syncfusion:SfChart.Behaviors>

<syncfusion:ChartCrosshairBehavior VerticalAxisLabelAlignment="Near">

</syncfusion:ChartCrosshairBehavior>

</syncfusion:SfChart.Behaviors>
ChartCrosshairBehavior behavior = new ChartCrosshairBehavior()
{

    VerticalAxisLabelAlignment = ChartAlignment.Near

};

chart.Behaviors.Add(behavior);

Axis label alignment support for crosshair in WinUI Chart

Far

<syncfusion:SfChart.Behaviors>

<syncfusion:ChartCrosshairBehavior VerticalAxisLabelAlignment="Far"  >

</syncfusion:ChartCrosshairBehavior>

</syncfusion:SfChart.Behaviors>
ChartCrosshairBehavior behavior = new ChartCrosshairBehavior()
{

    VerticalAxisLabelAlignment = ChartAlignment.Far

};

chart.Behaviors.Add(behavior);

Axis label alignment support for crosshair in WinUI Chart

Customization of Crosshair axis labels

The default appearance of the Crosshair axis labels can be customized by using the CrosshairLabelTemplate property of chart axis. It can be set as shown in the following code example.

<chart:SfChart.PrimaryAxis>
    
    <chart:CategoryAxis ShowTrackballInfo="True">
        
        <chart:CategoryAxis.CrosshairLabelTemplate>
                
            <DataTemplate>
                            
                 <Border Background="Orange" 
                                   
                         CornerRadius="4" 
                                    
                          BorderThickness="1" BorderBrush="Black">

                 <TextBlock Margin="2" Text="{Binding ValueX}"/>
                            
                </Border>
                
            </DataTemplate>
             
        </chart:CategoryAxis.CrosshairLabelTemplate>
                
    </chart:CategoryAxis>

</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>
                
       <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:SfChart.SecondaryAxis>

<chart:SfChart.Behaviors>
       
    <chart:ChartCrosshairBehavior />
    
</chart:SfChart.Behaviors>

Crosshair axis labels customization in WinUI