Check chartjs plugin document:
chartjs.org/chartjs-plugin-zoom/latest/guide/integration.html
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hi! I'm trying to implement zoom functionality for one chart widget. As I understand there is a dedicated plugin exists for Chart.js.
I set options like that:
'plugins' => [
'zoom' => [
'pan' => [
'enabled' => true,
'mode' => 'x',
'threshold' => 10,
],
'zoom' => [
'wheel' => [
'enabled' => true,
],
],
],
],
But zoom doesn't work.
I suppose that I need to install the plugin somehow. I installed it via npm. Some block appeared in package-lock.json:
"node_modules/chartjs-plugin-zoom": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.0.1.tgz",
"integrity": "sha512-ogOmLu6e+Q7E1XWOCOz9YwybMslz9qNfGV2a+qjfmqJYpsw5ZMoRHZBUyW+NGhkpQ5PwwPA/+rikHpBZb7PZuA==",
"dependencies": {
"hammerjs": "^2.0.8"
},
"peerDependencies": {
"chart.js": ">=3.2.0"
}
},
But still doesn't work.
I laso copied a js file of the plugin in public\js\filament\widgets\components\chartjs-plugin-zoom.min.js where main chart.js file stored. No success.
Could you help to understand how I can register the plugin source and use it in widgets? Many thanks in advance!
Please or to participate in this conversation.