SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components
Thank you for your question! In order to synchronize two charts, you need to perform the following steps:
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.
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
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!
Please login first to submit.