Zoom can be trigger outside of chart region

[arthurlm]

Hi,

I am using chart.js@3.6.2 and chartjs-plugin-zoom@1.2.0. I found that it is possible to zoom outside of chart data region. For example, I can zoom on legend / y-axis even if there is no data in this region.

See bellow screen capture:

I have following zoom plugin configuration:

    zoom: {
      pan: {
        enabled: true,
        mode: "x",
        modifierKey: "ctrl",
      },
      zoom: {
        drag: {
          enabled: true,
        },
        mode: "x",
      },
    },

I can provide limits configuration, which helps. But it is still possible to highlight legend / y-axis and trigger zoom with unwanted data.

I did not find any related issue on this git repository or on stackoverflow.com.

Is there any way to prevent zooming outside of data region ?

---

EDIT:

Looking deeper at the library code, I may have found the root cause of this "bug".

In https://github.com/chartjs/chartjs-plugin-zoom/blob/bb6dee3df3abad91fb6199f7e349859de448e75c/src/handlers.js#L67-L83

Variables, left / right / top / bottom are overridden if xEnabled or / and yEnabled.

Code should be:

  if (xEnabled) {
    left = Math.max(left, Math.min(beginPoint.clientX, endPoint.clientX) - offsetX);
    right = Math.min(right, Math.max(beginPoint.clientX, endPoint.clientX) - offsetX);
  }

  if (yEnabled) {
    top = Math.max(top, Math.min(beginPoint.clientY, endPoint.clientY) - offsetY);
    bottom = Math.min(bottom, Math.max(beginPoint.clientY, endPoint.clientY) - offsetY);
  }

Changing above lines fix the issue on local workspace. But I do not know if there is other impact changing this.

I can provide PR if anyone wants 😄

[hugo-valcourt]

subscribing

[hugo-valcourt]

I have the same issue, we can zoom outside of data, on yaxis and xaxis legend

[ikkala]

To fix https://github.com/chartjs/chartjs-plugin-zoom/issues/256 "Zoom triggered when hiding/showing series by clicking legend", I have created PR https://github.com/chartjs/chartjs-plugin-zoom/pull/772 "Don't trigger the zoom on legends area".

So, it has currently been limited to prevent zoom starting only when mouseDown happens in legends area.

What do people (including @kurkle) think, should I change the implementation to actually check if mouseDown happens in chartArea?

[estanglerbm]

If zoomable only along x-axis, it's goofy to allow drag zoom in the y-axis label area (in addition to the legends area).

But allowing drag zoom in the x-axis label area is perfectly fine.

So maybe chartArea + related axis label area(s)?