| title | page_title | description | slug | canonicalLink | position |
|---|---|---|---|---|---|
Panning and Zooming |
Panning and Zooming - Chart - Kendo UI for Vue |
Enable panning and zooming for the Kendo UI Chart in Vue projects. |
pan_and_zoom_chart_charts_wrapper |
3 |
The Chart enables the user to view specific ranges by applying panning and zooming to the component.
To enable panning, set the pannable option. You can also lock the X or Y axis by setting the nested lock attribute.
To enable zooming, set the zoomable option. You can also fine-tune the mouse-wheel and selection during zooming by setting the nested mousewheel and selection properties.
The following example demonstrates how to zoom in data for a specific period of time by using the SHIFT key and by mouse-dragging the Region Selection on mouse-enabled devices. To zoom in and out, use the mouse-wheel.
{% meta height:500 %} {% embed_file chart/panning-and-zooming/main.vue preview %} {% embed_file chart/panning-and-zooming/main.js %} {% endmeta %}