How to synchronize trackball in .NET MAUI SfCartesianChart ?

In this article, we described how to synchronize the trackball in multiple cartesian charts.

The Trackball feature in Syncfusion MAUI Cartesian Chart is an interactive functionality that allows users to track and display data points on a chart as they hover over on different areas of the chart. It provides real-time feedback by showing a marker or tooltip with relevant data, such as the value of a specific point on the chart. This enhances the user experience by providing detailed information about specific data points.

Importance of Synchronizing Trackball:

• Consistency: Ensures that all charts display data for the same point in time or category, making comparisons easier.
• Interactivity: Enhances the user experience by allowing synchronized interactions across multiple charts.

Steps to achieve Synchronized Trackball in .NET MAUI SfCartesianChart

Step 1: Set Up Multiple Charts
Determine the number of charts you need to create to effectively visualize your data. Initialize a grid with the desired number of rows and columns.
Let’s configure the Syncfusion .NET MAUI SfCartesian Chart using this getting started documentation in each grid cells. Assign a unique x: Name to each of the charts. Refer to the following code example to create multiple charts in your application.

[XAML]

<Grid>
    <!-- Define 3 rows for the grid layout -->
    <Grid.RowDefinitions>
         <RowDefinition Height="*"/>
         <RowDefinition Height="*"/>
         <RowDefinition Height="*"/>
   </Grid.RowDefinitions>

   <!--chart 1 -->

   <chart:SfCartesianChart Grid.Row="0" x:Name="firstChart"> 
       <chart:SfCartesianChart.XAxes>
           <chart:DateTimeAxis/>
       </chart:SfCartesianChart.XAxes>

       <chart:SfCartesianChart.YAxes>
           <chart:NumericalAxis/>
       </chart:SfCartesianChart.YAxes>

       <chart:SplineSeries ItemsSource="{Binding DataCollection1}" XBindingPath="Date" YBindingPath="Value"/>
   </chart:SfCartesianChart>

   <!--chart 2 -->

   <chart:SfCartesianChart Grid.Row="1" x:Name="secondChart">
       <chart:SfCartesianChart.XAxes>
           <chart:DateTimeAxis/>
       </chart:SfCartesianChart.XAxes>

       <chart:SfCartesianChart.YAxes>
           <chart:NumericalAxis/>
       </chart:SfCartesianChart.YAxes>

       <chart:StepLineSeries ItemsSource="{Binding DataCollection2}" XBindingPath="Date" YBindingPath="Value"/>
   </chart:SfCartesianChart>

   <!--chart 3 -->

   <chart:SfCartesianChart Grid.Row="2" x:Name="thirdChart">
       <chart:SfCartesianChart.XAxes>
           <chart:DateTimeAxis/>
       </chart:SfCartesianChart.XAxes>

       <chart:SfCartesianChart.YAxes>
           <chart:NumericalAxis/>
       </chart:SfCartesianChart.YAxes>

       <chart:StepLineSeries ItemsSource="{Binding DataCollection3}" XBindingPath="Date" YBindingPath="Value"/>
   </chart:SfCartesianChart>
</Grid> 

Step 2: Initialize TrackballBehavior
Initialize TrackballBehavior for each chart and specify a unique x: Name for each of the ChartTrackballBehavior. Refer to the following code to initialize TrackballBehavior.

[XAML]

<chart:SfCartesianChart Grid.Row="0" x:Name="firstChart"> 
       <chart:SfCartesianChart.TrackballBehavior>
              <chart:ChartTrackballBehavior x:Name="trackBall1" >       
       <chart:SfCartesianChart.TrackballBehavior> 
</chart:SfCartesianChart> 

Similarly, you have to mention for other charts also.

Step 3: Handle the TrackballCreated events
Handling the TrackballCreated events is crucial for synchronizing the trackball across multiple SfCartesianChart controls.

TrackballCreated Event: This event is triggered when the trackball is created or updated. By handling this event, you can synchronize the trackball position across multiple charts. In your XAML, ensure that the TrackballCreated event is wired up for each chart.

[XAML]

<chart:SfCartesianChart Grid.Row="0" x:Name="firstChart" TrackballCreated="firstChart_TrackballCreated">
  . 
  .
  .
</chart:SfCartesianChart> 

Similarly, you have to specify event for other charts also.
In your code-behind file (e.g., MainPage.xaml.cs), implement the event handlers to synchronize the trackball positions.

[C#]

public partial class MainPage : ContentPage
{
   public MainPage()
   {
       InitializeComponent();
   }

   private void HandleTrackballCreated(object sender, TrackballEventArgs e, SfCartesianChart primaryChart, ChartTrackballBehavior   trackBall1, ChartTrackballBehavior trackBall2)
   {
       var pointsInfo = e.TrackballPointsInfo;
       if (pointsInfo.Count > 0)
       {
           var item = (DataModel)pointsInfo[0].DataItem;
   
           // Convert chart point to screen point
           float xPoint = primaryChart.ValueToPoint(primaryChart.XAxes[0], item.Date.ToOADate());
           float yPoint = primaryChart.ValueToPoint(primaryChart.YAxes[0], item.Value);
   
           // Show the trackball markers on the other charts
           trackBall1.Show(xPoint, yPoint);
           trackBall2.Show(xPoint, yPoint);
       }
   }

   private void firstChart_TrackballCreated(object sender, TrackballEventArgs e)
   {
       HandleTrackballCreated(sender, e, firstChart, trackBall2, trackBall3);
   }
   
   private void secondChart_TrackballCreated(object sender, TrackballEventArgs e)
   {
       HandleTrackballCreated(sender, e, secondChart, trackBall1, trackBall3);
   }
   
   private void thirdChart_TrackballCreated(object sender, TrackballEventArgs e)
   {
       HandleTrackballCreated(sender, e, thirdChart, trackBall1, trackBall2);
   }
} 

In the above code, we have used the ValueToPoint method to convert the data point value to the screen point, and the ToOADate method is used to convert the DateTime value to a double value here. Then we have to specify those points in the ChartTrackballBehavior class show method to show synchronized trackball for all charts.

The following demo illustrates multiple charts in .NET MAUI with synchronized trackball, showing how the trackball positions move together across all charts when interacting with any one chart, following the implemented synchronization steps.

Output:

You can find the complete sample from this GitHub Repo link.

Conclusion:

I hope you enjoyed learning about how to Synchronize Trackball in .NET MAUI Multiple Cartesian Chart.
You can refer to our .NET MAUI CartesianChart 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 components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trail to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!