Show TrackBallInfo on multiple charts at the same time

Question

I have two different spline charts on two consecutive rows. Both of them have the same XBindinPath, but different YBindingPath. I have the following requirement for them -

When I mouse over any one of the charts, both of them will show TrackBallInfo at the same point along with their corresponding values on that point

Can I get some suggestions to implement that in a cleaner way?
Here is a scratch of my design-

Devakumar Dhanapoosanam · Answer

Hi HRahman, We have analyzed your query and achieved your requirement by using the multiple area support of chart using the ChartRowDefinition with multiple series based on your requirement in two rows and add the ChartTrackBallBehavior to show trackball for both chart row as per in the below code example. … Sample: https://www.syncfusion.com/downloads/support/forum/172669/ze/1726691049699530.zip Output: Please refer the below link for more details and let us know if you need any further assistance on this. UG: https://help.syncfusion.com/wpf/charts/area#multiple-area UG: https://help.syncfusion.com/wpf/charts/interactive-features/trackball#adding-trackball-to-the-sfchart Regards, Devakumar D

HRahman · Answer

Thank you

Devakumar Dhanapoosanam for your reply.But I need to show the charts separately, plus the charts will have their own header like, "Graph1" "Graph2" in the picture. I am trying to use two different charts for this. In that case, is there any way to control the TrackBall from the backend? So that, when I mouse over on any chart, this will enable the trackball of the other chart at the given point?Note: I am following MVVM pattern.

Devakumar Dhanapoosanam · Answer

Hi HRahman,

We have achieved your requirement by using the MouseMove event of the chart and custom ChartTrackballBehaviorExt class to call the Show method of trackball while mouse moving in any chart as per the below code example.

...

<chart:SfChart Grid.Row="0" x:Name="chart1"

Header="Graph 1"

MouseMove="chart_MouseMove" >

….

<chart:SfChart.Behaviors>

<local:ChartTrackBallBehaviorExt x:Name="trackball1" LineStyle="{StaticResource lineStyle}"/>

</chart:SfChart.Behaviors>

</chart:SfChart>

<chart:SfChart Grid.Row="1" x:Name="chart2"

Header="Graph 2" MouseMove="chart_MouseMove" >

…

<chart:SfChart.Behaviors>

<local:ChartTrackBallBehaviorExt x:Name="trackball2" LineStyle="{StaticResource lineStyle}"/>

</chart:SfChart.Behaviors>

</chart:SfChart>

private void chart_MouseMove(object sender, MouseEventArgs e)

{

var chart = sender as SfChart;

Point mousePoint = new Point

{

X = e.GetPosition(chart).X - chart.SeriesClipRect.Left - chart.Margin.Left,

Y = e.GetPosition(chart).Y - chart.SeriesClipRect.Top - chart.Margin.Top

};

ShowTrackball(mousePoint.X, mousePoint.Y);

}

private void ShowTrackball(double x, double y)

{

tracball1.Show((float)x, (float)y);

tracball2.Show((float)x, (float)y);

}

public class ChartTrackBallBehaviorExt : ChartTrackBallBehavior

{

...

public void Show(float x, float y)

{

IsActivated = true;

var point = new Point(x, y);

SetInternalProperty(typeof(ChartTrackBallBehavior), this, point, "CurrentPoint");

base.OnPointerPositionChanged();

InvokeInternalMethod(typeof(ChartTrackBallBehavior), this, "Activate", IsActivated);

}

…

}

Sample: https://www.syncfusion.com/downloads/support/forum/172669/ze/172669839323023.zip

Output:

Please refer the below link for more details

KB: https://www.syncfusion.com/kb/12846/how-to-show-the-trackball-programmatically-in-wpf-charts

Please let us know if you need any further assistance on this.

Regards,

Devakumar D