Chart.Zoom.js

A zoom and pan plugin for Chart.js >= 2.1.0

Panning can be done via the mouse or with a finger. Zooming is done via the mouse wheel or via a pinch gesture. Hammer JS is used for gesture recognition.

Live Codepen Demo

Configuration

To configure the zoom and pan plugin, you can simply add new config options to your chart config.

{
    // Container for pan options
    pan: {
        // Boolean to enable panning
        enabled: true,
 
        // Panning directions. Remove the appropriate direction to disable 
        // Eg. 'y' would only allow panning in the y direction
        mode: 'xy'
    },
    
    // Container for zoom options
    zoom: {
        // Boolean to enable zooming
        enabled: true,
 
        // Zooming directions. Remove the appropriate direction to disable 
        // Eg. 'y' would only allow zooming in the y direction
        mode: 'xy',
    }
}

To-do Items

The following features still need to be done:

• Pan limits. We should be able to set limits for all axes or for a single axis, identified by ID, that are the maximum and minimum values, in data values, that can be panned to.
• Zoom limits. Similar to pan limits but for zooming
• Panning of category scales (the ones that use strings as labels)
• Zooming of category scales (the ones that use strings as labels)

Installation

To download a zip, go to the Chart.Zoom.js on Github

To install via npm / bower:

npm install Chart.Zoom.js --save

Documentation

You can find documentation for Chart.js at www.chartjs.org/docs.

Examples for this plugin are available in the samples folder.

Contributing

Before submitting an issue or a pull request to the project, please take a moment to look over the contributing guidelines first.

License

Chart.Zoom.js is available under the MIT license.