How to synchronize the trackball in multiple WPF Charts?

This implementation demonstrates how to synchronize the trackball interaction between two charts using custom logic and a shared CustomTrackBallBehavior. Below is a step-by-step explanation of the logic used:

Step 1: Create Two Charts

• Two SfChart controls (chart1 and chart2) are defined with their respective DateTimeAxis (primary axis) and NumericalAxis (secondary axis).
• Both charts are associated with individual data collections (DataCollection1 and DataCollection2) for the FastLineSeries.
• Each chart uses a custom CustomTrackBallBehavior that extends the default ChartTrackBallBehavior.

<chart:SfChart x:Name="chart1" Header="FirstChart" Margin="5">

   <chart:SfChart.Behaviors>
       <local:CustomTrackBallBehavior x:Name="behavior1"/>
   </chart:SfChart.Behaviors>

   <chart:SfChart.PrimaryAxis>
       <chart:DateTimeAxis ShowTrackBallInfo="True" x:Name="axis" LabelFormat="MMM-dd"/>
   </chart:SfChart.PrimaryAxis>

   <chart:SfChart.SecondaryAxis>
       <chart:NumericalAxis ShowTrackBallInfo="True" x:Name="secAxis"/>
   </chart:SfChart.SecondaryAxis>

   <chart:FastLineSeries x:Name="series1" XBindingPath="Date" YBindingPath="Value"
                  ItemsSource="{Binding DataCollection1}"/>

</chart:SfChart>

// Similarly for Second chart
<chart:SfChart>
    ...
</chart:SfChart> 

Step 2: Add MouseMove Event Handlers

• SfChart_MouseMove1 is attached to chart1 for detecting the mouse position within the first chart and similarly, SfChart_MouseMove2 is for second chart.

<chart:SfChart x:Name="chart1" MouseMove="SfChart_MouseMove1">
   ...
</chart:SfChart>


<chart:SfChart x:Name="chart2" MouseMove="SfChart_MouseMove2">
   ...
</chart:SfChart> 

Step 3: Calculate the Mouse Point

• When the user moves the mouse:
  • The mouse position is retrieved relative to the chart’s AdorningCanvas using Mouse.GetPosition().
  • The position is adjusted to align with the chart’s SeriesClipRect by subtracting its Left and Top values.
• A condition checks if the adjusted MousePoint lies within the SeriesClipRect of the respective chart.
• If true: The trackball is activated for both charts.
• If false: The trackball is deactivated for both charts.

private void SfChart_MouseMove1(object sender, MouseEventArgs e)
{
   // Taking the first chart position as reference to get the mouse point.
   MousePoint = Mouse.GetPosition(behavior1.AdorningCanvas);
   var chart1 = (sender as SfChart);

   if (chart1.SeriesClipRect.Contains(MousePoint))
   {
       // Generalizing position with respect to axis width.
       MousePoint = new Point(
       MousePoint.X - chart1.SeriesClipRect.Left,
       MousePoint.Y - chart1.SeriesClipRect.Top);

       behavior1.ActivateTrackball(MousePoint);
       behavior2.ActivateTrackball(MousePoint);
   }
   else
   {
       behavior1.DeactivateTrackball();
       behavior2.DeactivateTrackball();
   }
}


// Similarly for second chart mouse move event
private void SfChart_MouseMove2(object sender, MouseEventArgs e)
{
    ...
} 

Step 4: Synchronize Trackball Across Charts

• Activate Trackball: The ActivateTrackball method of CustomTrackBallBehavior is called for both charts. It sets the IsActivated property to true and updates the trackball position.
• Deactivate Trackball: The DeactivateTrackball method hides the trackball by setting IsActivated to false.

public class CustomTrackBallBehavior : ChartTrackBallBehavior
{
    public void ActivateTrackball(Point mousePoint)
    {
        IsActivated = true;
        OnPointerPositionChanged(mousePoint);
    }

    public void DeactivateTrackball()
    {
        IsActivated = false;
    }
} 

Ouptut

For better understanding, please refer to the GitHub sample.

Conclusion

I hope you enjoyed learning about how to synchronize the trackball in WPF Chart(SfChart).

You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation to understand how to create 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 trial 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!