How to Customize the Trackball Label in .NET MAUI Cartesian Chart?

Trackball is an interactive feature that displays tooltips for the nearest data points when you touch or hover over the chart. On mobile devices, it appears with a long press and follows your drag. On desktop, it shows as you move the cursor over the chart area.

The SfCartesianChart in .NET MAUI provides a TrackballLabelTemplate that allows you to fully customize the appearance and content of the trackball labels. In this article, we’ll guide you on how to customize the Trackball label in .NET MAUI Syncfusion® Cartesian Chart.

Learn step-by-step instructions and gain insights to customize Trackball Label.

Step 1: Configure the Cartesian Chart

Define SfCartesianChart with CategoryAxis for the X-axis and NumericalAxis for the Y-axis. Add LineSeries to visualize data points.

XAML

<chart:SfCartesianChart>
......

  <chart:SfCartesianChart.XAxes>
      <chart:CategoryAxis/>
  </chart:SfCartesianChart.XAxes>

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

  ......

  <chart:LineSeries ItemsSource="{Binding Persons}"
               XBindingPath="Name"
               YBindingPath="Height"
               Label="Height"/>

</chart:SfCartesianChart> 

Step 2: Incorporate the Trackball

To enable the trackball interaction, add a ChartTrackballBehavior inside the chart’s TrackballBehavior property.

XAML

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

Step 3: Define a Custom DataTemplate

Create a DataTemplate inside the chart’s resources to customize the appearance of the trackball labels. The template can include any MAUI UI elements such as Label, Image, or layout containers like StackLayout or HorizontalStackLayout. Bindings inside the template can be used to access both the series metadata and the corresponding data model properties.

• Important: Ensure that the properties used in the bindings (e.g., ImageSource, Height) are defined in the data model (ViewModel). This data is essential for the binding to work correctly within the template.

In the following example, the Image element is bound to the ImageSource property from the data model (DataItem.ImageSource), allowing a small image to be displayed. This can be used to show a person’s profile photo, an icon, or any relevant graphic.

XAML

<chart:SfCartesianChart.Resources>
    <DataTemplate x:Key="trackballLabelTemplate">
        <HorizontalStackLayout>
            <Image Source="{Binding DataItem.ImageSource}" 
                   WidthRequest="20" 
                   HeightRequest="20"/>
            <Label Text="{Binding Series.Label, StringFormat=' {0} '}" 
                   FontSize="12" 
                   HorizontalOptions="Center"  
                   TextColor="White"/>
            <Label Text="{Binding DataItem.Height,StringFormat=' : {0} CM'}" 
                   FontSize="12" 
                   HorizontalOptions="Center" 
                   TextColor="White"/>
        </HorizontalStackLayout>
    </DataTemplate>
</chart:SfCartesianChart.Resources> 

Step 4: Apply the template to your Chart Series

Apply the template to the chart series by setting the TrackballLabelTemplate property using a StaticResource.

XAML

<chart:LineSeries 
          .....
           TrackballLabelTemplate="{StaticResource trackballLabelTemplate}"
          .....
</chart:LineSeries> 

Notes and Tips:

We can access these binding properties in the template:

• DataItem – Use this to access data linked to the associated business model. The binding context for TrackballLabelTemplate is TrackballPointInfo, which provides the necessary data for the label.
• Series.Label – The label of the series.

Output:

Conclusion

I hope you enjoyed learning how to customize trackball label in .NET MAUI toolkit Cartesian Chart.

You can refer to our .NET MAUI Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Toolkit Chart documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!