How to Add Dynamic Horizontal and Vertical Scrollbars to WPF FlexChart

This article will describe how to add a horizontal or vertical scrollbar to a chart with many X or Y values, even consistently updating values, such as in a time-series chart. These scroll bars can also be used to shorten or widen the x-axis or y-axis dynamically, to allow you to zoom in on a specific portion of a chart.

To add a horizontal scrollbar, you will need to add an AxisScrollBar to AxisX in MainWindow.xaml as shown in the code below:

<c1:C1FlexChart.AxisX>
    <c1:Axis Max="10" MajorUnit="1">
        <c1:Axis.Scrollbar>
            <c1:C1AxisScrollbar x:Name="XaxisScrollbar" Maximum="10"/>
        </c1:Axis.Scrollbar>
    </c1:Axis>
</c1:C1FlexChart.AxisX>

The same can be done for the Y-axis, as shown in the code below:

<c1:C1FlexChart.AxisY>
    <c1:Axis Max="10" MajorUnit="1">
        <c1:Axis.Scrollbar>
            <c1:C1AxisScrollbar x:Name="YaxisScrollbar" Maximum="10"/>
        </c1:Axis.Scrollbar>
    </c1:Axis>
</c1:C1FlexChart.AxisY>

You will also want to bind the FlexChart's Axis Maximum value to the relevant scroll bar's maximum value. This step is very important in the case of infinite value entries, such as when data is being entered in over time in a time series. You would set it for both the X and Y axis in the MainWindow.xaml.cs file as shown below:

flexChart.AxisX.Max = XaxisScrollbar.Maximum =chartInitMax;
flexChart.AxisY.Max = YaxisScrollbar.Maximum = chartInitMax;

In the example of an infinitely updating chart where new X-axis values are constantly being recorded and inputted into the graph, you can add the following code to the FlexChart_Rendered event to consistently update the X-axis maximum value range/bound for display:

private void FlexChart_Rendered(object sender, C1.WPF.Chart.RenderEventArgs e)
{
    flexChart.BeginUpdate();
    if (ChartBindingData.Count() - 1 == flexChart.AxisX.Max)
    {
        XaxisScrollbar.LowerValue = flexChart.AxisX.Max;
        XaxisScrollbar.UpperValue = XaxisScrollbar.Maximum += chartInitMax;
    }
    flexChart.EndUpdate();
}