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.
A complete sample project is available in the DevExpress Code Examples database at https://supportcenter.devexpress.com/ticket/details/e1383/how-to-use-an-axis-whole-range-and-visible-range-properties.
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.
Select the X-axis of your chart’s diagram, and in the Properties window, expand its AxisBase.VisualRange property.
When changing either of these properties, the Range.Auto property is automatically set to false.
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.
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.
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.