Panning and Zooming

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.

<div id="vueapp" class="vue-app">
    <kendo-chart :render-as="'canvas'"
                 :data-source="chartData"
                 :series="series"
                 :pannable-lock="'y'"
                 :zoomable-mousewheel-lock="'y'"
                 :zoomable-selection-lock="'y'"
                 :category-axis="categoryAxis"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            chartData: this.chartValues(),
            series: [{
                type: "column",
                field: "value",
                categoryField: "category"
            }],
            valueAxis: [{
                max: 140000,
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                },
                labels: {
                    rotation: "auto"
                }
            }],
            categoryAxis: {
                min: 0,
                max: 10,
                labels: {
                    rotation: "auto"
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        }
    },
    methods: {
        chartValues: function() {
            var data = [];

            for (var i = 0; i < 100; i++) {
                var val = Math.round(Math.random() * 10);

                data.push({
                    category: "C" + i,
                    value: val
                });
            }

            return data;
        }
    }
})

In this article