JSPM

@morimoriysmoon/chartjs-plugin-zoom

2.0.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q51296F
  • License MIT

Plugin that enables zoom and pan functionality in Chart.js charts.

Package Exports

  • @morimoriysmoon/chartjs-plugin-zoom
  • @morimoriysmoon/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js
  • @morimoriysmoon/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@morimoriysmoon/chartjs-plugin-zoom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

chartjs-plugin-zoom

GitHub Workflow Status Coverage Status release npm (latest) npm (next) documentation Awesome

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