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

ShowTrackballInfo

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

Xaml
C#

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis ShowTrackballInfo="True"/>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis ShowTrackballInfo="True"/>
          </chart:SfCartesianChart.YAxes>

          <chart:SfCartesianChart.TrackballBehavior>
              <chart:ChartTrackballBehavior />
          </chart:SfCartesianChart.TrackballBehavior>

          <chart:LineSeries ItemsSource="{Binding Data}"
                            XBindingPath="XValue"
                            YBindingPath="YValue"
                            ShowTrackballInfo="True"/>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    NumericalAxis xAxis = new NumericalAxis();
    xAxis.ShowTrackballInfo= true;
    chart.XAxes.Add(xAxis);

    NumericalAxis yAxis = new NumericalAxis();
    yAxis.ShowTrackballInfo= true;
    chart.YAxes.Add(yAxis);

    chart.TrackballBehavior = new ChartTrackballBehavior();

    LineSeries series = new LineSeries();
    series.ItemsSource = viewModel.Data;
    series.XBindingPath = "XValue";
    series.YBindingPath = "YValue";
    series.ShowTrackballInfo= 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	Description
Microsoft.UI.Xaml.DependencyProperty

ChartTrackballStyleProperty

The DependencyProperty for ChartTrackballStyle property.

Declaration

public static readonly DependencyProperty ChartTrackballStyleProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

LabelDisplayModeProperty

The DependencyProperty for LabelDisplayMode property.

Declaration

public static readonly DependencyProperty LabelDisplayModeProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

LabelHorizontalAlignmentProperty

The DependencyProperty for LabelHorizontalAlignment property.

Declaration

public static readonly DependencyProperty LabelHorizontalAlignmentProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

LabelVerticalAlignmentProperty

The DependencyProperty for LabelVerticalAlignment property.

Declaration

public static readonly DependencyProperty LabelVerticalAlignmentProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

LineStyleProperty

The DependencyProperty for LineStyle property.

Declaration

public static readonly DependencyProperty LineStyleProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

ShowLineProperty

The DependencyProperty for ShowLine property.

Declaration

public static readonly DependencyProperty ShowLineProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

UseSeriesPaletteProperty

The DependencyProperty for UseSeriesPalette property.

Declaration

public static readonly DependencyProperty UseSeriesPaletteProperty

Field Value

Type	Description
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);

LabelDisplayMode

Gets or sets the trackball display mode for the label.

Declaration

public TrackballLabelDisplayMode LabelDisplayMode { get; set; }

Property Value

Type	Description
TrackballLabelDisplayMode	This property takes the TrackballLabelDisplayMode value and its default value is FloatAllPoints.

Examples

Xaml
C#

    <chart:SfCartesianChart>

          <!--omitted for brevity-->

          <chart:SfCartesianChart.TrackballBehavior>
              <chart:ChartTrackballBehavior LabelDisplayMode="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()
   {
      LabelDisplayMode = TrackballLabelDisplayMode.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)

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)

WinUI- v20.4.0.48

Class ChartTrackballBehavior

Inheritance

Inherited Members

Namespace: Syncfusion.UI.Xaml.Charts

Assembly: Syncfusion.Chart.WinUI.dll

Syntax

Remarks

Constructors

ChartTrackballBehavior()

Declaration

Fields

AxisLabelAlignmentProperty

Declaration

Field Value

ChartTrackballStyleProperty

Declaration

Field Value

LabelDisplayModeProperty

Declaration

Field Value

LabelHorizontalAlignmentProperty

Declaration

Field Value

LabelVerticalAlignmentProperty

Declaration

Field Value

LineStyleProperty

Declaration

Field Value

ShowLineProperty

Declaration

Field Value

UseSeriesPaletteProperty

Declaration

Field Value

Properties

AxisLabelAlignment

Declaration

Property Value

Examples

ChartTrackballStyle

Declaration

Property Value

Examples

LabelDisplayMode

Declaration

Property Value

Examples

LabelHorizontalAlignment

Declaration

Property Value

Examples

LabelVerticalAlignment

Declaration

Property Value

Examples

LineStyle

Declaration

Property Value

Examples

ShowLine

Declaration

Property Value

Examples

UseSeriesPalette

Declaration

Property Value

Examples

Methods

OnHolding(HoldingRoutedEventArgs)

Declaration

Parameters

Overrides

OnPointerExited(PointerRoutedEventArgs)

Declaration

Parameters

Overrides

OnPointerMoved(PointerRoutedEventArgs)

Declaration