# chartjs-plugin-zoom: wheel zoom and drag pan for Chart.js > The official Chart.js zoom plugin adds mouse wheel zooming, pinch gestures and drag panning through the browser's native Pointer Events, with no extra gesture dependency, but it only supports Chart.js 3 and newer. **chartjs/chartjs-plugin-zoom** — Zoom and pan plugin for Chart.js - Repository: https://github.com/chartjs/chartjs-plugin-zoom - Stars: 623 · Forks: 330 - Language: JavaScript - License: MIT - Published: 2026-10-22 · Updated: 2026-10-22 · Language: en - Canonical page: https://hysenlabs.com/projects/chartjs-chartjs-plugin-zoom ## Zoom and pan built on native Pointer Events The plugin does one thing: it makes a Chart.js chart zoomable and pannable. The interaction model is described in two sentences in the README. Panning can be done via the mouse or with a finger, and zooming is done via the mouse wheel or via a pinch gesture. The implementation detail behind both is that gesture recognition uses the browser's native Pointer Events, so no extra dependency is required. That is the design decision with the widest consequences. A plugin that needed a gesture library would add bundle weight, a version to track and a second source of breakage, and it would have to reimplement pinch detection that the browser already provides. Since a wheel zoom and a two finger pinch are different input devices rather than the same gesture in different clothes, the plugin has to handle both, and the Pointer Events route means it can do so with what the platform hands it. For a chart library used in dashboards, the absence of an extra runtime dependency is often the deciding factor. ## Chart.js 2 users are pointed at version 0.7.7 The compatibility story is short and has a hard edge. The plugin supports Chart.js 3.0.0 and later, and for Chart.js 2.6.0 through 2.9.x the README directs you to version 0.7.7 of this plugin instead. That is a fork in the road rather than a gradual deprecation path, so a project still on Chart.js 2 cannot simply upgrade the plugin and keep going. There is also a naming wrinkle from the project's earlier life. Prior to version 0.4.0 the plugin was known as Chart.Zoom.js, and old versions are still available on npm under that name, which means two package identities exist in the npm registry for the same line of work. Anyone upgrading an older application needs to remove the legacy package as well as adding the current one, or the old code will still be registered against the chart. The project also maintains a MAINTAINING.md file at the top level alongside CONTRIBUTING.md, which is where you look for the process around issues and pull requests. ## One package with ESM, CommonJS and type declarations The published package is built to drop into whatever module system you already have. The package metadata marks the package as type module and points main at dist/chartjs-plugin-zoom.js for CommonJS consumers, module at dist/chartjs-plugin-zoom.esm.js for bundlers, and types at dist/index.d.ts for TypeScript. The exports map repeats the split with an import condition and a require condition under the same entry point. It also publishes prebuilt browser bundles through the usual CDN paths, jsdelivr and unpkg, both pointing at dist/chartjs-plugin-zoom.min.js. The homepage is the documentation site at www.chartjs.org/chartjs-plugin-zoom, and the repository ships the docs source in a docs directory with a VuePress build. A devcontainer directory and a set of editor configuration files, an .eslintrc.yml, an .htmllintrc, a .markdownlint.yml and a .prettierrc, sit alongside the source, which tells you the project treats its own linting and formatting as part of the contribution contract rather than an afterthought. ## Rollup builds the bundle, tsc emits the types separately The build is a two step process, and the npm scripts spell both steps out. The build script runs rollup -c and then npm run emitDeclarations, and the declaration step itself runs tsc -p tsconfig.build.json --emitDeclarationOnly followed by a second Rollup pass through rollup.dts.config.js. There are separate TypeScript configurations for the build, the project as a whole and the spec files, tsconfig.build.json, tsconfig.json and tsconfig.spec.json, and the typecheck script runs tsc -p tsconfig.json --noEmit to catch type errors without emitting anything. A watch mode exists for day to day work: autobuild runs rollup -c -w, and the docs script builds the documentation with vuepress build docs --no-cache while a parallel docs:dev mode runs the watcher and the VuePress dev server together. The lint script covers the TypeScript sources, the tests, the documentation scripts and the markdown files in one pass, which is why the repository carries a markdownlint configuration at all. ## Three test legs: types, Jasmine units and Karma browsers The test suite is split into three legs, and the test script runs them in sequence: test-types, then test-unit, then test-karma. The unit leg runs under Jasmine with a jasmine.json configuration, wrapped in cross-env and measured by c8, which produces a text report and lcov output into the coverage/unit directory, and the pretest-unit hook compiles the sources first with swc using the .swcrc-spec configuration. The browser leg runs through Karma, configured by karma.conf.cjs, and the two development scripts show the two browser targets the project works with: dev starts Karma in auto-watch mode against Chrome, and dev:ff does the same against Firefox. That combination matters for a plugin whose entire value is input handling. Zoom and pan behaviour depends on pointer events, wheel handling and touch behaviour, all of which differ between browsers and devices, so a Karma setup that runs the same specs in Chrome and Firefox is the minimum sensible check for this plugin rather than an extra. The samples directory holds runnable HTML pages, among them a file named zoom-separately.html. ## MIT licensed, v2.2.0 from November 2024, work continuing since The licence is MIT, and the README states that chartjs-plugin-zoom.js is available under the MIT licence, which is short enough to read in full and permissive enough to drop into commercial applications without a negotiation. The release history is worth reading as well. The tagged versions are v2.0.1 on 2023-03-22, v2.1.0 on 2024-11-18 and v2.2.0 on 2024-11-26, so the two most recent tags came eight days apart after a long gap. The repository is not archived and the last push was on 2026-10-18, well after the newest tag, which tells you the master branch is still moving while the tags lag behind. Continuous integration is configured through a workflow in .github, and the coverage badge in the README points at a Coveralls report for the master branch, so the project tracks coverage rather than treating the tests as a formality. One limitation of the README itself: it does not document the plugin options, which live on the documentation site, so the short readme is a starting point rather than a specification. ## Conclusion Adopt chartjs-plugin-zoom if you are on Chart.js 3.0.0 or newer and need wheel, pinch and drag interaction on a chart without shipping a gesture library. Do not expect it to serve Chart.js 2 applications, which need version 0.7.7, and note that the configuration options live on the docs site rather than in the README, so read them before you wire the plugin into a chart. ## FAQ ### Which Chart.js versions does chartjs-plugin-zoom support? The plugin supports Chart.js 3.0.0 and later. For Chart.js 2.6.0 to 2.9.x you should use version 0.7.7 of the plugin, which is published separately. ### How do users zoom and pan in chartjs-plugin-zoom? Panning works with the mouse or a finger, and zooming works with the mouse wheel or a pinch gesture. Gesture recognition uses the browser's native Pointer Events, so no extra dependency is needed. ### Does chartjs-plugin-zoom need a gesture library? No. The README states that gesture recognition uses the browser's native Pointer Events and that no extra dependency is required. ### What is the difference between Chart.Zoom.js and chartjs-plugin-zoom? They are the same project at different points in its life. Prior to version 0.4.0 the plugin was known as Chart.Zoom.js, and old versions are still available on npm under that name. ### What licence is chartjs-plugin-zoom released under? The MIT licence. The README states that chartjs-plugin-zoom.js is available under the MIT licence, and the package metadata repeats MIT as the licence field. ## Sources - [chartjs/chartjs-plugin-zoom on GitHub](https://github.com/chartjs/chartjs-plugin-zoom) - [Issues](https://github.com/chartjs/chartjs-plugin-zoom/issues) - [License: MIT](https://github.com/chartjs/chartjs-plugin-zoom/blob/master/LICENSE) - [README](https://github.com/chartjs/chartjs-plugin-zoom/blob/master/README.md) - [Releases](https://github.com/chartjs/chartjs-plugin-zoom/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/chartjs-chartjs-plugin-zoom