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.

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

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