Panning and Zooming
The Angular Chart enables the user to view specific ranges by applying panning and zooming to the component.
Panning and zooming functionality is not supported for the following chart series types due to rendering constraints:
Donut
,Pie
,Funnel
,Pyramid
,Polar
, andRadar
.
Basics
To perform panning, drag the plot area of the Chart.
To perform zooming, either:
- Mouse-wheel (desktop) or pinch-zoom (mobile), or
- Hold the
Shift
key and select an area.
To enable the pan-and-zoom functionality, use the pannable
and zoomable
options.
Limiting the Displayed Range
To limit the range, which is displayed by the Angular Chart:
- Set the
min
andmax
options of the category axis. - Enable panning and zooming, so that the user is able to see the rest of the data.
To limit the range that is displayed by the StockChart, refer to the article on the navigator and its
from
andto
options.
Disabling Pan-and-Zoom Directions
You can prevent panning and zooming for an axis by using the lock
configuration:
- To disable panning and zooming in the vertical direction, set the
pannable.lock
,zoomable.mousewheel.lock
, andzoomable.selection.lock
options to'y'
. - To disable panning and zooming in the horizontal direction, set the
pannable.lock
,zoomable.mousewheel.lock
, andzoomable.selection.lock
options to'x'
.
Setting Mousewheel Zoom Rate
By default, one click on the mousewheel will expand or contract the axis ranges by 30%. To set the zoom rate to a different value, set the rate
to a number in the range from 0.01 to 0.9 (1% to 90%).
Pan-and-Zoom Events
When the user pans or zooms the Angular Chart, the component triggers the following events, which contain the modified axes ranges.
dragStart
—Fires when the Chart starts panning. If you prevent the event, the Chart will stop panning.drag
—Fires while the Chart is panning. If you prevent the event, the change in the current axes ranges will also be prevented.dragEnd
—Fires after the Chart stops panning.zoomStart
—Fires when the Chart starts zooming. If you prevent the event, the Chart will stop zooming.zoom
—Fires while the Chart is zooming. If you prevent the event, the change in the current axes ranges will also be prevented.zoomEnd
—Fires when the Chart stops zooming.
In order for the axes to be included in the
axisRanges
field, provide names to the axes. If an axis range is not changed, thedrag
andzoom
events will not include it.