Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Collapse]Chart Control
   [Expand]Getting Started
   [Expand]Fundamentals
   [Expand]Providing Data
   [Expand]Appearance Customization
   [Expand]End-User Features
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Collapse]Examples
    [Expand]General
    [Expand]Creating Charts
    [Expand]Chart Elements
    [Collapse]End-User Interaction
      How to: Implement a Custom Series Animation
      How to: Implement a Custom Pie Animation
      How to: Implement a Custom Bar Animation
      How to: Implement a Custom Marker Animation
      How to: Implement a Custom Funnel Animation
      How to: Determine which Chart Element Is Hovered by the Mouse Pointer
      How to: Determine which Series Point Is Located Under the Test Point
      How to: Use Chart Tooltips
      How to: Show Custom Information in a Crosshair Cursor Tooltip
      How to: Show Series Labels Only for Hot-tracked Points
      How to: Implement Custom Hot-Tracking and Selection
      How to: Provide a Custom Cursor for a Chart
      How to: Provide Interactive Editing for Series Points
      How to: Provide Interactive Editing for a Constant Line
      How to: Create a Drill-Down Chart
      How to: Perform an Action When Series Points are Selected
      How to: Format Values in a Crosshair Cursor via a Label's Patterns
      How to: Make a Diagram Scrollable and Limit the Visual and Whole Range of Its Axis
      How to: Individually Adjust Axes Scrolling (Runtime Sample)
      How to: Individually Adjust Axes Zooming (Runtime Sample)
      How to: Customize the Secondary Axis Range When Chart Zooming is Performed
      How to: Customize Grid Lines, Grid Snapping of the Chart Range Control Client
      How to: Invoke the Chart Wizard at Runtime
      How to: Change the Page Order in a Wizard
      How to: Add a New Page to a Wizard
      How to: Hide Certain Tabs on a Wizard's Page
      How to: Invoke the Chart Designer at Runtime
    [Expand]Producing Output
   [Expand]Additional Resources
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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

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.

Show Me

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.

  • 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.

    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.

    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.

    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.

Expanded See Also

How would you rate this topic?​​​​​​​