How to zoom and pan multiple charts with livecharts library

I'm using beto-rodriguez's livecharts for WPF. I get data for charts from xml file and than i draw charts one above another, charts representing data have same number of spots on X axis and ZOOM and PAN are enabled with ch.Zoom = ZoomingOptions.X; and ch.Pan = PanningOptions.X; My question is possible to zoom or pan one (doesnt matter which) of those charts and that all of them are zoomed or panned so that i have vertically aligned X axis of all of them? Basically if I zoom or pan on one chart all others should zoom and pan in same time and for same amount.

Solution

What you have to do is create an event handler for the event "RangeChanged" on each graphs' axis

<lvc:CartesianChart.AxisX>
            <lvc:Axis Title="Time" RangeChanged="Axis_RangeChanged" Separator="{x:Static lvc:DefaultAxes.CleanSeparator}" DisableAnimations="True" />
        </lvc:CartesianChart.AxisX>

In the event handler you then can extract the new min and max value for the axis and apply it to all the graphs you have on your page

private void Axis_RangeChanged(LiveCharts.Events.RangeChangedEventArgs eventArgs)
    {
        //sync the graphs
        double min = ((Axis)eventArgs.Axis).MinValue;
        double max= ((Axis)eventArgs.Axis).MaxValue;

        this.lvcChart2.AxisX[0].MinValue = min;
        this.lvcChart2.AxisX[0].MaxValue = max;

        this.lvcChart.AxisX[0].MinValue = min;
        this.lvcChart.AxisX[0].MaxValue = max;

        //Repeat for as many graphs as you have
    }

There might be some other cool way by using commands and binding but this will at least get you started.