chartjs-plugin-zoom's Introduction

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" },
   },
 }
}

Recommend Projects