Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

akvaskov's avatar

Zoom plugin for Chart.js

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!

0 likes
1 reply
technofreaks's avatar

Check chartjs plugin document:

chartjs.org/chartjs-plugin-zoom/latest/guide/integration.html

Please or to participate in this conversation.