zoomEnabled: Boolean

Setting zoomEnabled to true enables zooming and panning feature of Chart. This way you can zoom into an area of interest when there is a large amount of data. This will also allow you to pan through the chart. If not set, the property is automatically enabled for large number of dataPoints. You can switch between zooming & panning using the toolbar that appears on the chart. After Zooming in, you can reset the chart by clicking the reset button.

Default: false
Options: true, false
Notes
  • Zooming and panning features are Touch Enabled.
  • They apply for Chart types that have Axis.
var  chart =  new  CanvasJS("container",
{
 .
 .
 zoomEnabled:true,
 .
 .
});
chart.render();
Values generated from a random generator.
Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

29 Comments

  1. Razvan Toma says:

    Is it possible to set a default zoom level? I have the graph of last year but I would like to show by default only the last month and be able to pan. Would this be possible? Thanks.

  2. Edward says:

    When zoomed in, can the tick skip be automatically disabled when a certain number of elements are displayed. Thus when zoomed in to a small section you can see the value for every tick mark, while the value is available in the mouseover it is convenient in some case to quickly scan.

    Also, text on the displayed buttons is somewhat counter intuitive, rather than be the mode to switch to, I think they should be the current mode, i.e. button should read Zoom when in Zoom mode and Pan when in Pan mode….

    • Dave Pelowitz says:

      That would be really counter intuitive–to “zoom” you would have to click on “pan” and to “pan” you would have to click on “zoom”. That is a lot like having to click on “start” to shut down–sorry Microsoft. A much better solution would be two buttons “pan” and “zoom” with the currently selected mode button disabled or something like “Toggle Pan/Zoom” or “Pan/Zoom” with the currently selected mode not bold and the goto mode bold. Such as Pan/Zoom and Pan/Zoom

        • Anjali says:

          daniel,

          We decided to postpone this feature in favour of animation. But currently have started creating spec document for this feature and several other related ones. But we still don’t have an exact timeline for the same.

          • Ruoyu says:

            I really need the function that there should be text area that user could input the values of x and y range to resize the graph. How could I realize it? Thank you!

    • Anjali says:

      landon,

      Yes, you can do so by dragging your finger across the area that you want to zoom into. Just make sure you have set zoomEnabled to true.

      • phill says:

        hi, I have added “zoomEnabled:true” in Range Bar Chart, which requires two y values -low and high. The effect is that I can zoom X axis up and down.

        So, is there a solution to choose which axis in X and Y to zoom? Thanks

  6. Andrew Goldberg says:

    Is there a callback function I can use once a zoom has taken place? I would like to axis the beginning and end values for the x axis after the zoom has taken place

    • Anjali says:

      Andrew,

      We still don’t have this feature in the public version. But currently we are working on it. We have sent you an internal build over email along with examples. Please note that this version is still under development and final version might have minor changes.

      • Brad Parker says:

        Would it be possible for me to get a copy of that build also? We are currently using 1.7.0 but would like to change some chart info whenever a zoom is performed by the user. Thanks

  7. Cecilia Richey says:

    If possible, I would also love to try out the new zoom callback functionality in a project I am working on. In fact, my project is really hanging on that. Thanks!

  9. Sebastian says:

    Hi, is there a way to have a default horizontal and vertical scrolling at the same time in a range bar?

    I have a range bar in a div-container that is scrollable but when i’m scrolling for example to the right, the horizontal axis disappears of course because the chart is one object. Is there any way to accomplish scrolling in a chart with having the axis remain visible?

    This fiddle-link should explain it:
    https://jsfiddle.net/u5qx0wdo/1/

    When I’m scrolling to the right the left axis ist not visible anymore and when the vertical-scrollbar is at the top, the bottom axis is not visible. I need a possibility to scroll but having the axis always visible.

  10. Oleg Iliev says:

    Hello,

    Is it possible to change the intervalType on zoom level? Currently, I set the interval according to the interval set by two input fields (begin date and end date).
    My idea is two change the interval type manually on zoom. Probably, I will need the initial and final zoom xAxis level.

    Thank you!

  11. Tejas Masurkar says:

    hello, Do we have functionality for getting direct zoom button ?.. instead of dragging horizontaly..
    Need to make zooming more something like this/?

If you have any questions, please feel free to ask in our forums. Ask Question