70 lines
2.1 KiB
Markdown
Executable File
70 lines
2.1 KiB
Markdown
Executable File
# chartjs-plugin-zoom
|
|
|
|
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](https://hammerjs.github.io/) is used for gesture recognition.
|
|
|
|
[Live Codepen Demo](https://codepen.io/pen/PGabEK)
|
|
|
|
## Configuration
|
|
|
|
To configure the zoom and pan plugin, you can simply add new config options to your chart config.
|
|
|
|
```javascript
|
|
{
|
|
// 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 chartjs-plugin-zoom.js on Github
|
|
|
|
To install via npm / bower:
|
|
|
|
```bash
|
|
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](https://www.chartjs.org/docs).
|
|
|
|
Examples for this plugin are available in the [samples folder](samples).
|
|
|
|
## Contributing
|
|
|
|
Before submitting an issue or a pull request to the project, please take a moment to look over the [contributing guidelines](https://github.com/chartjs/chartjs-plugin-zoom.js/blob/master/CONTRIBUTING.md) first.
|
|
|
|
## License
|
|
|
|
chartjs-plugin-zoom.js is available under the [MIT license](https://opensource.org/licenses/MIT).
|