SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components


I would like to synchronize zooming and scrolling between two or more charts. I would like to do it without using xaml. Can this be done?

  • You must to post comments
Best Answer

Hi there,

Thank you for your question! In order to synchronize two charts, you need to perform the following steps:

  1. Set the MouseManager.MouseEventGroup attached property on the root SciChartSurface.ChartModifier. This synchronizes the mouse events between two or more charts which share the same MouseEventGroup ID.

  2. Set the SciChartGroup.VerticalChartGroup attached property on the SciChartSurface itself. This synchronizes the sizes of the YAxis on multiple charts so that the charts line up

  3. Bind the XAxis.VisibleRanges together. This ensures that the charts are always in sync as you zoom / pan (eliminates rounding error).

These are demonstrated in our example Synchronize Multi Chart Mouse.

Doing this in Code Behind (no XAML)

Everything that can be done in XAML can be done in code. It is our convention to use XAML but there are various resources on the web which show you how to convert the two.

A code sample for mouse synchronization can be found below:

var scs0 = new SciChartSurface();
var scs1 = new SciChartSurface();

// omitted Axis, RenderableSeries for brevity
// ...

// 1. Set Mouse Event Group to sync mouse events
MouseManager.SetMouseEventGroup(scs0.ChartModifier, "MyGroup");
MouseManager.SetMouseEventGroup(scs1.ChartModifier, "MyGroup");

// 2. Set Vertical Chart Group to sync YAxis sizes
SciChartGroup.SetVerticalChartGroup(scs0, "ChartGroup");
SciChartGroup.SetVerticalChartGroup(scs1, "ChartGroup");

// 3. Bind XAxis together to sync XAxis.VisibleRange (avoids rounding errors)
var xAxis0 = scs0.XAxis as AxisBase;
var xAxis1 = scs1.XAxis as AxisBase;
Binding myBinding = new Binding("VisibleRange");
myBinding.Source = xAxis0.VisibleRange;
myBinding.Mode = BindingMode.TwoWay;
BindingOperations.SetBinding(xAxis1, AxisBase.VisibleRangeProperty, myBinding);

Let me know if this helps!

Best regards,

  • You must to post comments

Excellent, thanks!

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.