Zoom in Chart => control of zoom behavior

[Oliver]

Hi,

using the zoom function in a chart is working very nice. Today I got a request from one of my customers.

Situation:

Consider a standard chart with time periods on the x-axis, The most recent period is to the right. If you look at the chart with all periods visible and you zoom in, the chart zooms into the center of the chart. So the most recent period drops out to the right and the older periods to the left. 

 

Question:

Is it possible to stick the most recent period to the right, even if you zoom in? Currently it zooms into the center. The requested behaviour would be: Keep the right border and zoom in/out to the left side. So regardless of the zoom level, the most recent period is allways visible.

 

 

Best regards

Oliver

 

[Nikolay]

Hello Oliver,

Thank you for sharing this use-case with us.

By design, the Chart zoom feature performs zooming into the center of the currently visible range. Here useful comes the pan feature which allows the user to navigate through the zoomed Chart.

• https://www.telerik.com/kendo-vue-ui/components/charts/chart/pan-zoom/

Still, if changing this behavior is important for the project I could suggest submitting a feature request in our Feedback portal. In most cases, requests that gain lots of popularity are included in the RoadMap for future implementation.

Regards,
Nikolay
Progress Telerik

[Oliver]

Hi Nikolay,

 

thank you very much for your reply. 

I'm aware of the pan feature and already showed it to my customer. Just wanted to make sure I didn't miss some kind of property I could use. I'll give it a push to the feedback portal.

 

Thanks a lot

Oliver

[Nikolay]

Hello Oliver,

You are most welcome and I am sorry I did not help much.

After further thinking about this feature, I found another possibility of the Chart that might satisfy your project. It is possible to implement a slider that will give the option to control the zooming. Please check the following Dojo demo:

• https://dojo.telerik.com/AVoKUBeR

Regards,
Nikolay
Progress Telerik

[Oliver]

Hi Nikolay,

 

thank you very much for your example. Implementing a zoom slider might do the trick as a workaround. I'll give it a try, but still a corresponding chart property would be appreciated.

Any annotations about adapting your example to Vue? Not asking for a Vue example, just asking for anything to consider in addition, when using with Vue.

 

Best regards

Oliver

 

Best regards

Oliver

 

[Nikolay]

Hi Oliver,

There is nothing specific you need for implementing the slider. Simply declare the zoom event and follow the provided example.

<kendo-chart :title-text="'Kendo Chart Example'"
                 :series="series"
                 :category-axis-categories="categories"
                 v-on:zoom="onZoom">
    </kendo-chart>
...
new Vue({
    el: '#vueapp',
    methods: {
        onZoom: function(ev) {
            //the handler
        },

Regards,
Nikolay
Progress Telerik

[Oliver]

Hi Nikolay,

thank you very much :-)

Best regards

Oliver

[Nikolay]

Hi Oliver,

You are most welcome.

This thread will be closed now. Please submit a new one if anything new arises.

Regards,
Nikolay
Progress Telerik