chartjs-plugin-zoom
A zoom and pan plugin for Chart.js. Currently requires Chart.js >= 2.6.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.
Installation
Run npm install --save chartjs-plugin-zoom
to install with npm
.
If including via a <script>
tag, make sure to include Hammer.js
as well:
Configuration
To configure the zoom and pan plugin, you can simply add new config options to your chart config.
plugins: zoom: // 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 // A function that is called as the user is panning and returns the // available directions can also be used: // mode: function({ chart }) { // return 'xy'; // }, mode: 'xy' // Which of the enabled panning directions should only be available // when the mouse cursor is over one of scale. overScaleMode: 'xy' rangeMin: // Format of min pan range depends on scale type x: null y: null rangeMax: // Format of max pan range depends on scale type x: null y: null // On category scale, factor of pan velocity speed: 20 // Minimal pan distance required before actually applying pan threshold: 10 // Function called while the user is panning { console; } // Function called once panning is completed { console; } // Container for zoom options zoom: // Boolean to enable zooming enabled: true // Enable drag-to-zoom behavior drag: true // Drag-to-zoom effect can be customized // drag: { // borderColor: 'rgba(225,225,225,0.3)' // borderWidth: 5, // backgroundColor: 'rgb(225,225,225)', // animationDuration: 0 // }, // Zooming directions. Remove the appropriate direction to disable // Eg. 'y' would only allow zooming in the y direction // A function that is called as the user is zooming and returns the // available directions can also be used: // mode: function({ chart }) { // return 'xy'; // }, mode: 'xy' // Which of the enabled zooming directions should only be available // when the mouse cursor is over one of scale. overScaleMode: 'xy' rangeMin: // Format of min zoom range depends on scale type x: null y: null rangeMax: // Format of max zoom range depends on scale type x: null y: null // Speed of zoom via mouse wheel // (percentage of zoom on a wheel event) speed: 01 // Minimal zoom distance required before actually applying zoom threshold: 2 // On category scale, minimal zoom level before actually applying zoom sensitivity: 3 // Function called while the user is zooming { console; } // Function called once zooming is completed { console; }
API
chart.resetZoom()
Programmatically resets the zoom to the default state. See samples/zoom-time.html for an example.
Installation
To download a zip, go to the chartjs-plugin-zoom.js on Github
To install via npm / bower:
npm install chartjs-plugin-zoom --save
Prior to v0.4.0, this plugin was known as 'Chart.Zoom.js'. Old versions are still available on npm under that name.
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
chartjs-plugin-zoom.js is available under the MIT license.