@morimoriysmoon/chartjs-plugin-zoom
v2.0.4
Published
Plugin that enables zoom and pan functionality in Chart.js charts.
Downloads
12
Readme
chartjs-plugin-zoom
A zoom and pan plugin for Chart.js >= 3.0.0
For Chart.js 2.6.0 to 2.9.x support, use version 0.7.7 of this plugin.
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.
Documentation
You can find documentation for chartjs-plugin-zoom at www.chartjs.org/chartjs-plugin-zoom.
Prior to v0.4.0, this plugin was known as 'Chart.Zoom.js'. Old versions are still available on npm under that name.
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.
Change log
- Supports range selection with "range" options
// sample options
const zoomPluginOptions = {
pan: {...},
zoom: {...},
range: {
enabled: true,
mode: "xy",
mirroring: true, // if false, "normal" mode
drawTime: "beforeDatasetsDraw",
modifierKey: "alt",
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgb(255, 99, 132)",
borderWidth: 1,
onRangeSelected: (chart, rangeDataIndex) => {
// rangeDataIndex: {x: {left, right}, y:{top, bottom}}
},
label: {
enabled: false,
font: {
size: 10,
weight: "normal",
color: "rgb(255, 99, 132)",
},
xFormatter: (dataIndex) => { return "x-value" },
yFormatter: (dataIndex) => { return "y-value" },
},
}
}