menu

WinUI

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

    Show / Hide Table of Contents

    Class ChartTrackballBehavior

    ChartTrackballBehavior tracks data points in a chart closer to the mouse hover position or at a touch contact point.

    Inheritance
    System.Object
    ChartBehavior
    ChartTrackballBehavior
    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 ChartTrackballBehavior : ChartBehavior
    Remarks

    To enable the track ball in the chart, create an instance of ChartTrackballBehavior and set it to the property of SfCartesianChart.

    To view the trackball label in the particular axis, you have to enable the ShowTrackballLabel property in that axis.

    It provides options to customize the trackball line, symbol, and label.

    LineStyle

    LineStyle is used to customize the appearance of the trackball line.

    • Xaml
    • C#
    • ViewModel
        <chart:SfCartesianChart>
    
              <!--omitted for brevity-->
    
              <chart:SfCartesianChart.TrackballBehavior>
                  <chart:ChartTrackballBehavior>
                      <chart:ChartTrackballBehavior.LineStyle>
                          <Style TargetType = "Line">
                              <Setter Property="StrokeDashArray" Value="5,2"/>
                              <Setter Property = "Stroke" Value="Red"/>
                          </Style>
                      </chart:ChartTrackballBehavior.LineStyle>
                  </chart:ChartTrackballBehavior>
              </chart:SfCartesianChart.TrackballBehavior>
    
              <chart:LineSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"/>
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
        // 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.TrackballBehavior = new ChartTrackballBehavior()
        {
           LineStyle = lineStyle,
        };
    
        LineSeries series = new LineSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);
        public ObservableCollection<Model> Data { get; set; }
    
        public ViewModel()
        {
           Data = new ObservableCollection<Model>();
           Data.Add(new Model() { XValue = 10, YValue = 100 });
           Data.Add(new Model() { XValue = 20, YValue = 150 });
           Data.Add(new Model() { XValue = 30, YValue = 110 });
           Data.Add(new Model() { XValue = 40, YValue = 230 });
        }

    ChartTrackballStyle

    ChartTrackballStyle is used to customize the appearance of the trackball symbol. By default, the trackball symbol is displayed as an ellipse.

    • Xaml
    • C#
        <chart:SfCartesianChart>
    
              <!--omitted for brevity-->
    
              <chart:SfCartesianChart.TrackballBehavior>
                  <chart:ChartTrackballBehavior>
                      <chart:ChartTrackballBehavior.ChartTrackballStyle>
                          <Style TargetType="chart:ChartTrackballControl">
                              <Setter Property = "Background" Value="Red"/>
                          </Style>
                      </chart:ChartTrackballBehavior.ChartTrackballStyle>
                  </chart:ChartTrackballBehavior>
              </chart:SfCartesianChart.TrackballBehavior>
    
              <chart:LineSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"/>
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
       // omitted for brevity
       var trackballStyle = new Style() { TargetType = typeof(ChartTrackballControl) };
       trackballStyle.Setters.Add(new Setter(ChartTrackballControl.BackgroundProperty, new SolidColorBrush(Colors.Red)));
       chart.TrackballBehavior = new ChartTrackballBehavior()
       {
          ChartTrackballStyle = trackballStyle,
       };
    
        LineSeries series = new LineSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);

    UseSeriesPalette

    Series color is applied to the trackball label by setting UseSeriesPalette to true, and its default value is false.

    • Xaml
    • C#
        <chart:SfCartesianChart>
    
              <!--omitted for brevity-->
    
              <chart:SfCartesianChart.TrackballBehavior>
                  <chart:ChartTrackballBehavior UseSeriesPalette="True"/>
              </chart:SfCartesianChart.TrackballBehavior>
    
              <chart:LineSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"/>  
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
       // omitted for brevity
       chart.TrackballBehavior = new ChartTrackballBehavior()
       {
          UseSeriesPalette = true,
       };
    
        LineSeries series = new LineSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);

    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.TrackballBehavior>
                  <chart:ChartTrackballBehavior />
              </chart:SfCartesianChart.TrackballBehavior>
    
              <chart:LineSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"
                                ShowTrackballLabel="True"/>
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
        NumericalAxis xAxis = new NumericalAxis();
        xAxis.ShowTrackballLabel= true;
        chart.XAxes.Add(xAxis);
    
        NumericalAxis yAxis = new NumericalAxis();
        yAxis.ShowTrackballLabel= true;
        chart.YAxes.Add(yAxis);
    
        chart.TrackballBehavior = new ChartTrackballBehavior();
    
        LineSeries series = new LineSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        series.ShowTrackballLabel= true;
        chart.Series.Add(series);

    TrackballLabelTemplate

    TrackballLabelTemplate is used to customize the appearance of the series label in the trackball.

    • Xaml
        <chart:SfCartesianChart>
    
              <!--omitted for brevity-->
    
              <chart:SfCartesianChart.TrackballBehavior>
                  <chart:ChartTrackballBehavior />
              </chart:SfCartesianChart.TrackballBehavior>
    
              <chart:LineSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue">
                   <chart:LineSeries.TrackballLabelTemplate>
                       <DataTemplate>
                           <Border CornerRadius = "5" BorderThickness="1" 
                                BorderBrush="Black" Background="LightGreen" Padding="5">
                               <TextBlock Foreground = "Black" Text="{Binding ValueY}"/>
                           </Border>
                       </DataTemplate>
                   </chart:LineSeries.TrackballLabelTemplate>
              </chart:LineSeries>
    
        </chart:SfCartesianChart>

    Note: This is only applicable for SfCartesianChart.

    Constructors

    ChartTrackballBehavior()

    Initializes a new instance of the ChartTrackballBehavior class.

    Declaration
    public ChartTrackballBehavior()

    Fields

    AxisLabelAlignmentProperty

    The DependencyProperty for AxisLabelAlignment property.

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

    ChartTrackballStyleProperty

    The DependencyProperty for ChartTrackballStyle property.

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

    DisplayModeProperty

    The DependencyProperty for DisplayMode property.

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

    LabelHorizontalAlignmentProperty

    The DependencyProperty for LabelHorizontalAlignment property.

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

    LabelVerticalAlignmentProperty

    The DependencyProperty for LabelVerticalAlignment property.

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

    LineStyleProperty

    The DependencyProperty for LineStyle property.

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

    ShowLineProperty

    The DependencyProperty for ShowLine property.

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

    UseSeriesPaletteProperty

    The DependencyProperty for UseSeriesPalette property.

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

    Properties

    AxisLabelAlignment

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

    Declaration
    public ChartAlignment AxisLabelAlignment { 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.TrackballBehavior>
                  <chart:ChartTrackballBehavior AxisLabelAlignment="Near"/>
              </chart:SfCartesianChart.TrackballBehavior>
    
              <chart:LineSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"/>  
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
       // omitted for brevity
       chart.TrackballBehavior = new ChartTrackballBehavior()
       {
          AxisLabelAlignment = ChartAlignment.Near,
       };
    
        LineSeries series = new LineSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);

    ChartTrackballStyle

    Gets or sets the style for ChartTrackballControl to customize the appearance of the trackball.

    Declaration
    public Style ChartTrackballStyle { 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.TrackballBehavior>
                  <chart:ChartTrackballBehavior>
                      <chart:ChartTrackballBehavior.ChartTrackballStyle>
                          <Style TargetType="chart:ChartTrackballControl">
                              <Setter Property = "Background" Value="Red"/>
                          </Style>
                      </chart:ChartTrackballBehavior.ChartTrackballStyle>
                  </chart:ChartTrackballBehavior>
              </chart:SfCartesianChart.TrackballBehavior>
    
              <chart:LineSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"/>
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
       // omitted for brevity
       var trackballStyle = new Style() { TargetType = typeof(ChartTrackballControl) };
       trackballStyle.Setters.Add(new Setter(ChartTrackballControl.BackgroundProperty, new SolidColorBrush(Colors.Red)));
       chart.TrackballBehavior = new ChartTrackballBehavior()
       {
          ChartTrackballStyle = trackballStyle,
       };
    
        LineSeries series = new LineSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);

    DisplayMode

    Gets or sets the trackball display mode for the label.

    Declaration
    public LabelDisplayMode DisplayMode { get; set; }
    Property Value
    Type Description
    LabelDisplayMode

    This property takes the LabelDisplayMode value and its default value is FloatAllPoints.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
              <!--omitted for brevity-->
    
              <chart:SfCartesianChart.TrackballBehavior>
                  <chart:ChartTrackballBehavior DisplayMode="GroupAllPoints"/>
              </chart:SfCartesianChart.TrackballBehavior>
    
              <chart:LineSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"/>  
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
       // omitted for brevity
       chart.TrackballBehavior = new ChartTrackballBehavior()
       {
          DisplayMode = LabelDisplayMode.GroupAllPoints,
       };
    
        LineSeries series = new LineSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);

    LabelHorizontalAlignment

    Gets or sets the ChartAlignment for the horizontal alignment of the label.

    Declaration
    public ChartAlignment LabelHorizontalAlignment { get; set; }
    Property Value
    Type Description
    ChartAlignment

    This property takes the ChartAlignment value and its default value is Auto.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
              <!--omitted for brevity-->
    
              <chart:SfCartesianChart.TrackballBehavior>
                  <chart:ChartTrackballBehavior LabelHorizontalAlignment="Near" />
              </chart:SfCartesianChart.TrackballBehavior>
    
              <chart:LineSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"/>  
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
       // omitted for brevity
       chart.TrackballBehavior = new ChartTrackballBehavior()
       {
          LabelHorizontalAlignment= ChartAlignment.Near,
       };
    
        LineSeries series = new LineSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);

    LabelVerticalAlignment

    Gets or sets the ChartAlignment for the vertical alignment of the label.

    Declaration
    public ChartAlignment LabelVerticalAlignment { get; set; }
    Property Value
    Type Description
    ChartAlignment

    This property takes the ChartAlignment value and its default value is Auto.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
              <!--omitted for brevity-->
    
              <chart:SfCartesianChart.TrackballBehavior>
                  <chart:ChartTrackballBehavior LabelVerticalAlignment="Near" />
              </chart:SfCartesianChart.TrackballBehavior>
    
              <chart:LineSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"/>  
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
       // omitted for brevity
       chart.TrackballBehavior = new ChartTrackballBehavior()
       {
          LabelVerticalAlignment= ChartAlignment.Near,
       };
    
        LineSeries series = new LineSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);

    LineStyle

    Gets or sets the style to customize the appearance of the trackball line.

    Declaration
    public Style LineStyle { 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.TrackballBehavior>
                  <chart:ChartTrackballBehavior>
                      <chart:ChartTrackballBehavior.LineStyle>
                          <Style TargetType = "Line" >
                              <Setter Property="StrokeDashArray" Value="5,2"/>
                              <Setter Property = "Stroke" Value="Red"/>
                          </Style>
                      </chart:ChartTrackballBehavior.LineStyle>
                  </chart:ChartTrackballBehavior>
              </chart:SfCartesianChart.TrackballBehavior>
    
              <chart:LineSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"/>
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
        // 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.TrackballBehavior = new ChartTrackballBehavior()
        {
           LineStyle = lineStyle,
        };
    
        LineSeries series = new LineSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);

    ShowLine

    Gets or sets the value that indicates whether to show or hide the trackball line.

    Declaration
    public bool ShowLine { get; set; }
    Property Value
    Type Description
    System.Boolean

    This property takes the bool values and its default value is True.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
              <!--omitted for brevity-->
    
              <chart:SfCartesianChart.TrackballBehavior>
                  <chart:ChartTrackballBehavior ShowLine="True"/>
              </chart:SfCartesianChart.TrackballBehavior>
    
              <chart:LineSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"/>  
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
       // omitted for brevity
       chart.TrackballBehavior = new ChartTrackballBehavior()
       {
          ShowLine = true,
       };
    
        LineSeries series = new LineSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);

    UseSeriesPalette

    Gets or sets a value indicating whether to change the color of the labels based on the series color.

    Declaration
    public bool UseSeriesPalette { get; set; }
    Property Value
    Type Description
    System.Boolean

    This property takes the bool values and its default value is False.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
              <!--omitted for brevity-->
    
              <chart:SfCartesianChart.TrackballBehavior>
                  <chart:ChartTrackballBehavior UseSeriesPalette="True"/>
              </chart:SfCartesianChart.TrackballBehavior>
    
              <chart:LineSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"/>  
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
       // omitted for brevity
       chart.TrackballBehavior = new ChartTrackballBehavior()
       {
          UseSeriesPalette = true,
       };
    
        LineSeries series = new LineSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);

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