Pan not working in chartjs-plugin-zoom

[pepe12311]

Hi, I’m using Chart.js v4.4.3 with chartjs-plugin-zoom and I can’t get the pan feature to work. The zoom (with mouse wheel) works perfectly, but pan doesn’t do anything — even though it’s enabled and configured.

I’ve tested multiple combinations of versions (including plugin v2.0.0, 2.2.0, and latest), used both CDN and local copies, and tried different browsers and systems.

Here’s a minimal example to reproduce the issue: No errors are shown in the console, but the onPan callback is never triggered. Any suggestions on what might be missing or misconfigured? Thanks in advance!

chartjs-plugin-zoom.html.zip

[glimpsedchaos]

Same issue. I have tried on Chart.js v4.3.3 and latest v4.5.0 with Zoom plugin v2.0.1 and 2.2.0 with no working pan option. Zoom options work. I've tried pan with and without modifier key. I've tried changing the threshold to 0, 1, 100 and there is no pan. Limits seems to have no affect either. Here is my config:

zoom: { zoom: { wheel: { enabled: true// Enable zooming with mouse wheel //modifierKey: 'ctrl', // Optional: require Ctrl key to zoom }, pinch: { enabled: false // Enable zooming with pinch gestures }, drag: { enabled: false, // Enable drag-to-zoom backgroundColor: "rgba(225,225,225,0.3)", // Optional: highlight area borderColor: "rgba(225,225,225,0.6)", // Optional: border color borderWidth: 1, // Optional: border width //modifierKey: "shift" // Optional: require Shift key }, mode: "x", // Options: 'x', 'y', 'xy' speed: 0.1, // Zoom speed threshold: 2 // Minimum distance for drag to trigger zoom }, pan: { enabled: true, mode: "xy", speed: 20, threshold: 0, modifierKey: 'shift', }, limits: { x: { min: minTime.getTime(), max: maxTime.getTime() } } },

[glimpsedchaos]

I have found what I think is a documentation issue or rather clarification for panning.

From documentation: "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."

This seems to imply you only need hammerjs for gesture recognition.

However, I tested with a very basic setup. I tested with and without hammerjs loading.

I found that with hammerjs panning works fine. But without hammerjs panning does not work at all. Zooming works in both cases.

Chart v4.4.6 (and older) Hammerjs v2.0.8 Chartjs-plugin-zoom v2.2.0 (and older)

<div>
  <canvas id="myChart"></canvas>
</div>

const ctx = document.getElementById('myChart');
Chart.register(ChartZoom);
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [
      'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange',
      'Pink', 'Brown', 'Gray', 'Cyan', 'Magenta', 'Teal'
    ],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3, 8, 6, 4, 10, 7, 9],
      borderWidth: 1,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)',
        'rgba(255, 182, 193, 0.2)', 'rgba(139, 69, 19, 0.2)',
        'rgba(128, 128, 128, 0.2)', 'rgba(0, 255, 255, 0.2)',
        'rgba(255, 0, 255, 0.2)', 'rgba(0, 128, 128, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)',
        'rgba(255, 182, 193, 1)', 'rgba(139, 69, 19, 1)',
        'rgba(128, 128, 128, 1)', 'rgba(0, 255, 255, 1)',
        'rgba(255, 0, 255, 1)', 'rgba(0, 128, 128, 1)'
      ]
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
    plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true,
          },
          pinch: {
            enabled: true
          },
          mode: 'xy',
        },
        pan: {
          enabled: true,
          mode: 'xy',
        },        
      }
    }
  }
});

[Neurone]

Same issue here, pan not working. The Hammer trick does not work for me.

Funny thing, if I set the panning in the documentation playground it works (!) but it seems the page is not loading hammer.js directly - but maybe it's included during the building of the scripts.

In my case I'm not building with Webpack or similar, I'm just importing the libraries like this:

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-zoom.min.js"></script>

[Neurone]

Yeah, now I see Hammer is embedded with webpack inside the scripts of that page: https://www.chartjs.org/chartjs-plugin-zoom/latest/assets/js/app.bac2971a.js so probably @glimpsedchaos you are right.

[glimpsedchaos]

Also issue #938 about the use of hammer.js and how it has not been updated is concerning. It is just in low maintenance mode.

[s00500]

Thanks! just stumbled into this, feels a bit like a documentation oversight...

[haibogg-dotcom]

Thanks for saving my life!

[Tampa]

Apparently the versions used here: https://codepen.io/kurkle/pen/abJmpgZ work as well. Ended up using:

This works for mode x and xy

No, no clue why that specific combination is the key and it's rather annoying when docs and everything seems totally out of sync now. This is basic functionality for large data sets!