New to Kendo UI for jQuery? Download free 30-day trial

jQuery Bar Charts Pan and Zoom

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Edit in Kendo UI Dojo
  • Change Theme
    default
    SASS
    LESS
    Default Theme
    • Main
    • Main Dark
    • Nordic
    • Ocean Blue
    • Purple
    • Turquoise
    Bootstrap Theme
    • Main
    • Main Dark
    • Nordic
    • Urban
    • Vintage
    Material Theme
    • Main
    • Arctic
    • Lime Dark
    • Main Dark
    • Nova
    Classic Theme
    • Main
    • Main Dark
    • Opal
    • Silver
    Fluent Theme
    • Main
    Launch Theme Builder
pan-and-zoom.html

Also available for:

API REFERENCE

Description

The pan-and-zoom feature allow you to navigate through, and zoom in and zoom out the jQuery Bar Chart. You can enable the pan feature through the pannable property as well as to lock either the X or Y axis by using the nested pannable.lock one, or control the zoom ratio by using the zoomable.mousewheel.rate property.

To enable the zoom, set the zoomable configuration option. You can also fine-tune the mouse wheel and selection zooming through the available mousewheel and selection nested properties.

To zoom in data for a specific period of time on mouse-enabled devices, use the Shift + Mouse Drag Region Selection combination. To zoom in and out, use the mousewheel.

This Bar Chart example is part of a unique collection of hundreds of jQuery demos, with which you can see all Kendo UI for jQuery components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Kendo UI for jQuery Dojo or ThemeBuilder.

Support & Learning Resources

Additional Resources