How to: Make a Diagram Scrollable and Limit the Visual and Whole Range of Its Axis

  • 2 minutes to read

This tutorial demonstrates how the axis whole and visible ranges can be limited, so that a user can access only a part of a chart's underlying data.

TIP

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E1383.

To specify the visible range of an axis, do the following.

  • Create a new chart, or open an existing one. For this example, we'll use a simple XY-chart shown in the following image.

    UseScrollingRange_0

  • Select the X-axis of your chart's diagram, and in the Properties window, expand its AxisBase.VisualRange property.

    Limit the visible range of the X-axis by its two outermost values, via the Range.MinValue and Range.MaxValue properties.

    NOTE

    When changing either of these properties, the Range.Auto property is automatically set to false.

    UseScrollingRange_1

    To define the space remaining after the axis' ultimate value, you can use the Range.AutoSideMargins property.

  • Now, we can allow end users to scroll the diagram along the limited X-axis, to access the series points that are out of view. To do this, enable the XYDiagram2D.EnableAxisXScrolling property. After this, if the XYDiagramPaneBase.EnableAxisXScrolling property of the corresponding pane is also enabled (or, set to the default value), a scroll bar appears along the X-axis.

    UseScrollingRange_2

  • Finally, you can also restrict the whole range, making the points out of this range completely inaccessible by an end user.

    To do this, select the X-axis, and in the Properties window, expand the AxisBase.WholeRange property. You will see a set of properties identical to the set of the axis visible range options.

    So, to limit the whole range, specify the Range.MinValue and Range.MaxValue properties. Again, after you define any of these properties, the Range.Auto property is automatically disabled.

    UseScrollingRange_3

    The implementation of the ScrollingRange.SideMarginsEnabled property is similar to its axis range counterpart.

If required, you can specify how the diagram can be scrolled (using the keyboard, mouse, or scroll bars), via the XYDiagram2D.ScrollingOptions property.

See Also