Skip to main content

Zooming and panning

Zooming and panning are configurable and can be performed by left or right mouse button. Zooming can be also performed with mouse wheel. Zooming and panning could be performed on touch screen as well.

Default behavior (ViewXY)​

Zoom-rectangle​

  • Draw zoom-in rectangle around area of interest by clicking and holding on GraphArea the left-mouse button and drag mouse from upper left corner to bottom right corner. Release mouse button when correct area is selected.

  • Drawing zoom rectangle in opposite direction (from-right-to-left) will initiate data auto-fit action upon mouse button release.

RectangleZoomMode = HorizontalAndVertical Default settings: ZoomPanOptions.RectangleZoomMode = HorizontalAndVertical. ZoomOrigin has no effect on the zooming rectangle.

note

User can cancel zoom-rectangle by pressing Esc-key until mouse button is released.

Zooming by clicking​

  • With chart control focused, press Shift key down. Zoom X cursor appears. Click configured (left) mouse button to zoom in, and the other button to zoom out.

  • With chart control focused, press Ctrl key down. Zoom Y cursor appears. Click configured (left) mouse button to zoom in, and the other button to zoom out.

Panning GraphArea​

  • Panning is done by clicking and dragging the GraphArea with right-mouse button. To stop panning, release the button.

Zooming with axis ScaleNibs​

  • Each axis has ScaleNibs at both ends. Those could be dragged with mouse. Once mouse cursor is over ScaleNibs the 'Horizontal Resize' or 'Vertical Resize' icon will appear (for X- or Y-axis respectively). Press primary mouse button and drag. Dragging toward axis center will have zoom-in effect, while dragging away from axis center will have zoom-out effect.

ScaleNibs Axes ScaleNibs (encircled in red) with 'Vertical Resize' cursor (top-left corner)

Zooming with mouse wheel​

Zoom in by scrolling the mouse wheel upwards and zoom out by scrolling it downwards. The zoom center is the position of mouse cursor. Use ZoomFactor to adjust the mouse wheel zoom strength. By keeping Shift key pressed, the zoom is applied only to X dimension. By keeping Ctrl key pressed, the zoom applies only for Y dimension.

Panning with mouse wheel​

When mouse cursor is over axis-area (rectangle around axis line and labels), then mouse wheel scrolling will pan specific axis.

Zooming with touch screen​

Set two fingers on the chart and pinch the fingers closer to zoom out, or away to zoom in.

By pinching/spreading fingers above an X or Y axis or their labels, the zooming applies to that specific axis only.

Panning with touch screen​

Set two fingers on the screen and slide them at same pace to pan the view.

Some systems support panning with inertia, so it is possible to “throw” the fingers off the screen, and the view keeps panning and finally slows down until stopped.

By setting a finger above an X or Y axis or labels of it, and sliding the finger, the panning applies to that specific axis only.

tip

If you not familiar with some of the terms, please check our Definitions page.

Modifying zooming and panning behavior (ViewXY)​

Use ViewXY.ZoomPanOptions to control the zooming and panning settings.

ZoomPanOptions

For more in depth discussion about fine turning this behavior check our In detail page.

Besides properties also event handlers could be used for fine turning zooming and panning functionality/behavior. The relevant events are ViewXY.BeforeZooming, ViewXY.BeforePanning, Axis.RangeChanged, ViewXY.Panned and ViewXY.Zoomed. The example of usage could be found in how-to pages: limit zooming range.