# Panning and Zooming The Angular Chart enables the user to view specific ranges by applying panning and zooming to the component. Enable pan and zoom with the [`pannable`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#pannable) and [`zoomable`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#zoomable) options by setting them to `true` on the `` component tags. The following snippet shows the basic setup: ```html ``` After you enable these options, users can drag the plot area to pan and use one of the following interactions to zoom: * Mouse-wheel (desktop) or pinch-zoom (mobile), or * Hold the `Shift` key and select an area. Use pan and zoom when you need to inspect dense time-series data without reducing the full dataset. In most dashboards, mousewheel zoom works best for incremental inspection, while selection zoom works better when users need to jump to a narrow interval. The following example demonstrates the basic `pannable` and `zoomable` setup on a date-based category axis. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/pan-zoom/basic/source.txt) > Panning and zooming functionality is not supported for the following chart series types due to rendering constraints: `Donut`, `Pie`, `Funnel`, `Pyramid`, `Polar`, and `Radar`. For StockChart range navigation, use the [StockChart Navigator](https://www.telerik.com/kendo-angular-ui-develop/components/charts/stock-chart) instead. ## Limiting the Displayed Range To limit the range, which is displayed by the Angular Chart: 1. Set the [`min`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/categoryaxis#min) and [`max`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/categoryaxis#max) options of the category axis. 2. Enable [panning](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#pannable) and [zooming](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#zoomable), so that the user is able to see the rest of the data. This configuration is useful when the initial load must focus on the latest or most relevant portion of the dataset. The `min` and `max` values define the first visible window, and panning or zooming exposes the remaining categories. The following example demonstrates how to start from a constrained range and let the user navigate through a longer series. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/pan-zoom/display-range/source.txt) > To limit the range that is displayed by the StockChart, refer to the [StockChart Navigator](https://www.telerik.com/kendo-angular-ui-develop/components/charts/stock-chart) article and its `from` and `to` 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`, and `zoomable.selection.lock` options to `'y'`. * To disable panning and zooming in the horizontal direction, set the `pannable.lock`, `zoomable.mousewheel.lock`, and `zoomable.selection.lock` options to `'x'`. Axis locking is useful when you need to preserve one scale while the user navigates the other. For example, lock the `y` axis to keep value comparisons stable while the user moves through time, or lock the `x` axis to inspect vertical variation without changing the visible categories. The following example demonstrates how to keep the value axis fixed and allow navigation only through the category axis. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/pan-zoom/lock/source.txt) ## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/mousewheelzoom#rate) to a number in the range from 0.01 to 0.9 (1% to 90%). Use smaller values for precise inspection of crowded points, and larger values for faster movement across long ranges. If the chart reacts too aggressively, lower the rate before you disable mousewheel zoom altogether. The following example demonstrates how different `rate` values change the zoom step. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/pan-zoom/rate/source.txt) ## 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. | Event | Description | | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | [`dragStart`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#dragstart) | Fires when the Chart starts panning. If you prevent the event, the Chart will stop panning. | | [`drag`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#drag) | Fires while the Chart is panning. If you prevent the event, the change in the current axes ranges will also be prevented. | | [`dragEnd`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#dragend) | Fires after the Chart stops panning. | | [`zoomStart`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#zoomstart) | Fires when the Chart starts zooming. If you prevent the event, the Chart will stop zooming. | | [`zoom`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#zoom) | Fires while the Chart is zooming. If you prevent the event, the change in the current axes ranges will also be prevented. | | [`zoomEnd`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#zoomend) | Fires when the Chart stops zooming. | Use these events when the visible range must drive other parts of the page, such as an external filter, a detail pane, or persisted user state. The event arguments expose the modified axis ranges, which lets you react to the exact viewport the user selected. > In order for the axes to be included in the `axisRanges` field, provide names to the axes. > If an axis range is not changed, the `drag` and `zoom` events will not include it. The following example demonstrates how to log the updated ranges during pan and zoom interactions. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/pan-zoom/events/source.txt) ## Suggested Links * [Angular Charts Homepage](https://www.telerik.com/kendo-angular-ui/charts) * [Angular Charts Building Elements](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements) * [Chart Events](https://www.telerik.com/kendo-angular-ui-develop/components/charts/events) * [API Reference of the Angular Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api) * [Glossary](https://www.telerik.com/kendo-angular-ui-develop/components/charts/glossary)