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

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 – Changes the marker background color.
• Height – Adjusts the marker height.
• Stroke - Modifies the marker border color.
• StrokeWidth - Sets the width of the marker border.
• Type - Defines the marker shape type.
• Width - Adjusts the marker width.

Learn step-by-step instructions and gain insights to customize the trackball marker for each 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 how to customize the trackball marker in a .NET MAUI Cartesian Chart.

You can refer to our .NET MAUI Cartesian Chart feature tour page to know about its other groundbreaking feature representations. Explore our .NET MAUI Chart documentation to understand how to present and manipulate data.

For current customers, 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 comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!