FlexChart | ComponentOne
End-user Interaction / Scroll
In This Topic
    Scroll
    In This Topic

    Scrolling in charts comes into picture when huge amount of data needs to be plotted in a limited space but requires detailed analysis. This feature provides end-user with an ability to focus on analysis of the selected range of values instead of the whole data. For instance, while presenting the daily price movement of a stock across an year, axis scroll bars can enable end-user to focus on movement of data in a month or even a week.

    axis scrollbar

    FlexChart allows you to add scroll bars to X-axis as well as Y-axis by using AxisScrollBar class of C1.Win.Chart.Interaction namespace. To attach a scroll bar to an axis in FlexChart, you need to create an instance of the AxisScrollBar class and pass an Axis object as a parameter to it. By default, the scroll bar gets displayed with two thumbs that define the range of current selection using the UpperValue and LowerValue properties. The upper and lower value changes when user drags these thumbs at run-time and a ValueChanged event is fired. A scroll bar also consists of two scroll buttons on extreme ends which when clicked helps the end-user to scroll the selected range. You can choose to hide these buttons by setting the ScrollButtonsVisible property to False.

    flexChart1.Rendering += (s, e) =>
    {
        if (_horizontalScrollbar != null && _verticalScrollbar != null)
            return;
    
        //Creating instance of ScrollBar and attaching it to AxisX
        _horizontalScrollbar = new C1.Win.Chart.Interaction.AxisScrollbar(flexChart1.AxisX);
    
        //Setting upper value of ScrollBar
        _horizontalScrollbar.UpperValue = _horizontalScrollbar.LowerValue + 150;
    
        //Creating instance of ScrollBar and attaching it to AxisY
        _verticalScrollbar = new C1.Win.Chart.Interaction.AxisScrollbar(flexChart1.AxisY);
    
        //Hide ScrollBar buttons
        _verticalScrollbar.ScrollButtonsVisible = false;
    };
    
    AddHandler flexChart1.Rendering, Function(s, e)
        If _horizontalScrollbar IsNot Nothing AndAlso _verticalScrollbar IsNot Nothing Then
         Return Nothing
         End If
            _horizontalScrollbar = New C1.Win.Chart.Interaction.AxisScrollbar(flexChart1.AxisX)
            _horizontalScrollbar.UpperValue = _horizontalScrollbar.LowerValue + 150
            _verticalScrollbar = New C1.Win.Chart.Interaction.AxisScrollbar(flexChart1.AxisY)
            _verticalScrollbar.ScrollButtonsVisible = False
    End Function
    
    See Also

    Documentation