Home › forums › Using CanvasJS › Button to zoom
Tagged: button, canvasjs, click, zoom
This topic contains 7 replies, has 3 voices, and was last updated by Emeric 1 year ago.
I’m using CanvasJS since few weeks and I have a question about zoom.
I saw we can zoom easily by drag & drop but I would like to create a button to zoom (by click).
Example: I have a button “x2” and when i click on it it zooms x2 on my graph (no drag & drop, just a click).
I searched a lot and i found nothing.
Thank you in advance !
(Sorry my english isn’t perfect !)
To zoom into certain region, you need to change viewportMinimum and viewportMaximum. If you like to set viewportMinimum and viewportMaximum to certain region after clicking the button, you can achieve as shown in this jsfiddle.
Also take a look at this jsfiddle, where viewportMinimum and viewportMaximum are changed based on dropdown options.
Thank you a lot that’s it !
I have another question with viewport.
For example I have this graph: https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/
We can zoom by using drag & drop, is it possible to get the viewportMinimum and the viewportMaximum of this zoom ?
I tried to console.log both but it’s “undefined”. Is it possible to get this value after zooming with the mouse ?
rangeChanged and rangeChanging events are fired on zooming, panning and reset. Please, take a look at this page for more details.
Hello Suyash Singh,
Thank you for your answer.
I saw we can get the number of event but what I want is the value/label of X when I zoom or when I use the pan. I don’t really understand how it works, can you tell more ?
When you change the viewport range by either zooming, panning or reset rangeChanging and rangeChanged events are fired. rangeChanging event is fired just before the current viewports are updated and the rangeChanged is fired on updation of the current viewports i.e. after zooming, panning or reset. An event parameter is passed to the event handler that you assign to the rangeChanging/rangeChanged event.This parameter contains current viewportMinimum, viewportMaximum and other properties.
You can use the viewportMinimum and viewportMaximum to check in which range of the axis you have zoomed into.
Please have a look at this jsfiddle in which all the dataPoints in the current zoomed range is displayed in the browser console.
Also please refer the following jsfiddle which shows the viewports on zooming/panning.
Oh ok thank you a lot !
You must be logged in to reply to this topic.