How to customize the trackball marker in a .NET MAUI Cartesian Chart using the TrackballCreated event?

This article provides a detailed walkthrough on how to customize the trackball markers in a .NET MAUI Cartesian Chart using the TrackballCreated event.

The SfCartesianChart provides a TrackballCreated event which occurs when the trackball moves from one data point to another. This event argument contains an object of the TrackballPointsInfo , which contains MarkerSettings property.

The TrackballCreated event in the SfCartesianChart provides access to and allows manipulation of the following properties to modify the appearance of the trackball marker:

• Fill – used to change the marker background color.
• Height – used to change the height of the marker.
• Stroke - used to change the marker border color.
• StrokeWidth - used to change the width of the marker border.
• Type - used to set the marker shape type.
• Width - used to change the width of the marker.

Learn step-by-step instructions and gain insights to customize the trackball marker for each individual series.

Step 1: Initialize ChartTrackballBehavior in a SfCartesianChart.

XAML

<chart:SfCartesianChart>

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

</chart:SfCartesianChart> 

Step 2: Setting up the TrackballCreated event in SfCartesianChart.

XAML

<chart:SfCartesianChart TrackballCreated="SfCartesianChart_TrackballCreated">
           ...
</chart:SfCartesianChart> 

Step 3: Add multiple series to the SfCartesianChart as follows:

XAML

<chart:SfCartesianChart.Series>

   <chart:LineSeries x:Name="series1" ItemsSource="{Binding DataItems}" XBindingPath="Year" YBindingPath="Value"
                      Label="Person A" Fill="RoyalBlue" StrokeWidth="2">
   </chart:LineSeries>

   <chart:LineSeries x:Name="series2" ItemsSource="{Binding DataItems2}" XBindingPath="Year" YBindingPath="Value"
                      Label="Person B" Fill="HotPink" StrokeWidth="2">
   </chart:LineSeries>

   <chart:LineSeries x:Name="series3" ItemsSource="{Binding DataItems3}"  XBindingPath="Year" YBindingPath="Value"
                      Label="Person C" Fill="Green" StrokeWidth="2">
   </chart:LineSeries>

</chart:SfCartesianChart.Series> 

Step 4: Customize trackball markers for each series using the TrackballCreated event handler method.

C#

private void SfCartesianChart_TrackballCreated(object sender, TrackballEventArgs e)
{
   var items = e.TrackballPointsInfo;

   foreach (var item in items)
   {
       var series = item.Series;

       if (series == series1)
       {
           item.MarkerSettings = new ChartMarkerSettings()
           {
               Fill = Colors.DeepSkyBlue,
               Width = 15,
               Height = 15,
               Stroke = Colors.RoyalBlue,
               StrokeWidth = 2,
               Type = ShapeType.InvertedTriangle
           };
       }

       else if (series == series2)
       {
           item.MarkerSettings = new ChartMarkerSettings()
           {
               Fill = Colors.LightPink,
               Width = 15,
               Height = 15,
               Stroke = Colors.HotPink,
               StrokeWidth = 2,
               Type = ShapeType.Cross
           };
       }

       else if (series == series3)
       {
           item.MarkerSettings = new ChartMarkerSettings()
           {
               Fill = Colors.LightSeaGreen,
               Width = 15,
               Height = 15,
               Stroke = Colors.Green,
               StrokeWidth = 2,
               Type = ShapeType.Diamond
           };
       }
   }
} 

Output:

Conclusion:

I hope you enjoyed learning about how to customized the trackball markers in .NET MAUI SfCartesianChart.

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

For current customers, you can check out our .NET MAUI components 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!