Trackball in Xamarin.Android Chart(SfChart)

25 Nov 202212 minutes to read

The Trackball feature displays the tooltip for the data points that are closer to the point where you touch on the chart area. This feature, especially, can be used instead of data label feature when you cannot show data labels for all data points due to space constraint. To enable this feature, add an instance of ChartTrackballBehavior to the Behaviors collection property of SfChart. Trackball will be activated once you long-press anywhere on the chart area. Once it is activated, it will appear in the UI and move based on your touch movement until you stop touching on the chart.

You can use the following properties to show or hide the line and labels.

  • ShowLabel: Shows or hides trackball label. Default value is true.

  • ShowLine: Shows or hides the trackball line. Default value is true.

  • C#
    • [C#]

SfChart chart = new SfChart();
...

ChartTrackballBehavior trackballBehavior = new ChartTrackballBehavior();
trackballBehavior.ShowLabel = true;
trackballBehavior.ShowLine = true;

chart.Behaviors.Add(trackballBehavior);

    Trackball support in Xamarin.Android Chart

    Label display mode

    The LabelDisplayMode property is used to specify whether to display label for all the data points along the vertical line or display only single label. Following are the three options you can set to this property:

    • FloatAllPoints: Displays label for all the data points along the vertical line.
    • NearestPoint: Displays label for single data point that is nearer to the touch contact position.
    • GroupAllPoints: Displays label for all the data points are grouped and positioned at the top of the chart area.
  • C#
    • [C#]

trackballBehavior.LabelDisplayMode = TrackballLabelDisplayMode.NearestPoint;

    In the following screenshot, trackball label is shown for only single data point.

    Label display mode support for trackball in Xamarin.Android Chart

    Activation mode

    The ActivationMode property is used to restrict the visibility of trackball based on the touch actions. The default value of this property is ChartTrackballActivationMode.LongPress.

    The ChartTrackballActivationMode enum contains the following values:

    • LongPress – Activates trackball only when performing the long press action.
    • TouchMove – Activates trackball only when performing touch move action.
    • None – Hides the visibility of trackball when setting activation mode to None. It will be activated when calling the Show method.

    Customizing appearance

    Customize Trackball Labels

    The LabelStyle property provides options to customize the trackball labels.

    • TextColor: Used to change the color of the labels.
    • BackgroundColor: Used to change the label background color.
    • StrokeColor: Used to change the border color.
    • StrokeWidth: Used to change the thickness of the border.
    • TextSize: Used to change the text size.
    • Typeface: Used to change the font family and font weight.
    • LabelFormat: Used to set numeric or date time format for the trackball labels.
    • MarginTop: Used to change the top margin of the labels.
    • MarginBottom: Used to change the bottom margin of the labels.
    • MarginLeft: Used to change the left margin of the labels.
    • MarginRight: Used to change the right margin of the labels.
  • C#
    • [C#]

SfChart chart = new SfChart();
...

ChartTrackballBehavior trackballBehavior = new ChartTrackballBehavior();

trackballBehavior.LabelStyle.BackgroundColor = Color.Cyan;

trackballBehavior.LabelStyle.StrokeColor = Color.ParseColor("#FF8C0707");

trackballBehavior.LabelStyle.StrokeWidth = 2;

trackballBehavior.LabelStyle.TextColor = Color.Red;

trackballBehavior.LabelStyle.TextSize = 18;

chart.Behaviors.Add(trackballBehavior);

    Customize Trackball Marker

    The MarkerStyle property provides options to customize the trackball markers.

    The following properties are used to customize the trackball marker:

    • ShowMarker: Used to enable or disable the marker. Default value is true.
    • StrokeColor: Used to change the marker stroke color.
    • Color: Used to change the marker background color.
    • StrokeWidth: Used to change the width of the marker stroke.
    • Width: Used to change the width of the marker.
    • Height: Used to change the height of the marker.
    • MarkerType: Used to change the type of the marker such as Cross, Ellipse, Diamond, and more.
  • C#
    • SfChart chart = new SfChart();
...

ChartTrackballBehavior trackballBehavior = new ChartTrackballBehavior();

trackballBehavior.MarkerStyle.StrokeColor = Color.Purple;

trackballBehavior.MarkerStyle.StrokeWidth = 1;

trackballBehavior.MarkerStyle.ShowMarker = true;

trackballBehavior.MarkerStyle.Height = 8;

trackballBehavior.MarkerStyle.Width = 8;

trackballBehavior.MarkerStyle.Color = Color.Green;

chart.Behaviors.Add(trackballBehavior);

    Customize Trackball Line

    The LineStyle property provides options to customize the trackball line.

    • ShowLine: Used to enable or disable the line. Default value is true.
    • StrokeWidth: Used to change the stroke width of the line.
    • StrokeColor: Used to change the stroke color of the line.
    • PathEffect: Specifies the dashes to be applied on the line.
  • C#
    • [C#]

SfChart chart = new SfChart();
...

ChartTrackballBehavior trackballBehavior = new ChartTrackballBehavior();

trackballBehavior.ShowLine = true;
     
trackballBehavior.LineStyle.StrokeWidth = 2;
     
trackballBehavior.LineStyle.StrokeColor = Color.Blue;

trackballBehavior.LineStyle.PathEffect = new DashPathEffect(new float[] { 2, 3 }, 3);

chart.Behaviors.Add(trackballBehavior);

    The following screenshot illustrates the customization of trackball elements.

    Customizing the appearance of trackball label in Xamarin.Android Chart

    Custom View

    You can customize the appearance of Trackball label with your own view by overriding the GetView method of ChartTrackballBehavior. You can get the respective series, underlying object and index of the data point from argument of the GetView method.

  • C#
    • [C#]

protected override View GetView(ChartSeries series, object data, int index)
        {
            LinearLayout parentLayout = new LinearLayout(Chart.Context);
            parentLayout.SetPadding(2, 2, 2, 2);
            parentLayout.Orientation = Orientation.Horizontal;
            LinearLayout layout = new LinearLayout(Chart.Context);
            layout.Orientation = Orientation.Vertical;

            ImageView image = new ImageView(Chart.Context);
            image.LayoutParameters = new ViewGroup.LayoutParams(new LinearLayout.LayoutParams
                ((int)(Chart.Context.Resources.DisplayMetrics.Density * 40), (int)(Chart.Context.Resources.DisplayMetrics.Density * 40)));
            image.SetPadding(0, 2, 0, 2);
            image.SetImageResource(Resource.Drawable.grain);

            TextView text1 = new TextView(Chart.Context);
            text1.SetTextColor(Color.White);
            text1.Text = (data as Model).YValue + "%";
            text1.TextSize = 12;
            text1.SetTypeface(Typeface.SansSerif, TypefaceStyle.Bold);
            layout.AddView(text1);

            TextView text2 = new TextView(Chart.Context);
            text2.Text = "Efficiency";
            text2.TextSize = 10;
            text2.SetTextColor(Color.White);
            layout.AddView(text2);
            layout.SetPadding(5, (int)(Chart.Context.Resources.DisplayMetrics.Density * 5), 2, 0);

            parentLayout.AddView(image);
            parentLayout.AddView(layout);

            return parentLayout;
        }

    Customizing the view of trackball label in Xamarin.Android Chart

    Show or hide the trackball label in axis

    This feature is used to highlight the respective axis label when the trackball is moving across the axis. The ShowTrackballInfo property is used to show or hide the trackball label of the axis. The TrackballLabelStyle property is used to customize its appearance. Default value of ShowTrackballInfo is False.

  • C#
    • [C#]

chart.PrimaryAxis = new NumericalAxis()
{
    ShowTrackballInfo = true
};

    Axis label alignment

    The position of trackball’s axis label can be changed using the LabelAlignment property of ChartTrackballAxisLabelStyle. The following options are available in LabelAlignment.

    • Far: The label will be positioned below the tick in vertical axis and right of the tick in horizontal axis.
    • Near: The label will be positioned above the tick in vertical axis and left of the tick in horizontal axis.
    • Center: The label will be positioned at the center of tick. This is the default value.

    The following code snippet demonstrate the placement of label at the left to tick line.

  • C#
    • [C#]

  primaryAxis.TrackballLabelStyle.LabelAlignment = ChartLabelAlignment.Near;

    Show or hide the series label

    This feature is used to show or hide the trackball label of the series by using the ShowTrackballInfo property. Default value of the ShowTrackballInfo property is True.

  • C#
    • [C#]

SfChart chart = new SfChart();
...

LineSeries lineSeries = new LineSeries()
{
    ItemsSource = Data,
    XBindingPath = "Year",
    YBindingPath = "Value",
    ShowTrackballInfo = false

};
chart.Series.Add(lineSeries);

    Method

    OnLabelsGenerated

    To customize the appearance of trackball label based on condition, override the OnLabelsGenerated method of ChartTrackballBehavior. The argument of this method is ChartPointInfo, which contains the following properties:

    • Label: Used to provide text for trackball label.
    • IsVisible: Determines the visibility of trackball.
    • Series: Gets the respective series of the data point in which the trackball is activated.
    • LabelStyle: Customizes the appearance of trackball label.
    • ChartDataPoint: Gets the respective underlying object of the data in which the trackball is activated.
    • DataPointIndex: Gets the index of the selected data point.
    • XPosition: Gets the x-position of trackball label.
    • YPosition: Gets the y-position of trackball label.
    • Color: Gets the default color of trackball label.

    Show method

    The Show method is used to activate the trackball at the specified location.

  • C#
    • [C#]

trackball.Show(pointX, pointY);

    Hide method

    The Hide method is used to hide the trackball programmatically.

  • C#
    • [C#]

trackball.Hide();

    HitTest method

    The HitTest method is used to check whether the point is in trackball or not.

  • C#
    • [C#]

trackball.HitTest(pointX, pointY);

    Get the touch position

    The OnLongPress(float valueX, float valueY) method of ChartTrackballBehavior can be override to get the touch points while doing interactions.

    See also

    How to add the multiple trackball in Xamarin.Android charts