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 and zoomable options by setting them to true on the <kendo-chart> component tags.
The following snippet shows the basic setup:
<kendo-chart [pannable]="true" [zoomable]="true"></kendo-chart>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
Shiftkey 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.
Panning and zooming functionality is not supported for the following chart series types due to rendering constraints:
Donut,Pie,Funnel,Pyramid,Polar, andRadar. For StockChart range navigation, use the StockChart Navigator instead.
Limiting the Displayed Range
To limit the range, which is displayed by the Angular Chart:
- Set the
minandmaxoptions of the category axis. - Enable panning and zooming, 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.
To limit the range that is displayed by the StockChart, refer to the StockChart Navigator article and its
fromandtooptions.
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.lockoptions to'y'. - To disable panning and zooming in the horizontal direction, set the
pannable.lock,zoomable.mousewheel.lock, andzoomable.selection.lockoptions 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.
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%).
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.
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 | 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. |
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
axisRangesfield, provide names to the axes. If an axis range is not changed, thedragandzoomevents will not include it.
The following example demonstrates how to log the updated ranges during pan and zoom interactions.