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

chartjs-plugin-zoom/src/handlers.js

Lines 67 to 83 in bb6dee3

	export function computeDragRect(chart, mode, beginPoint, endPoint) {
	const {left: offsetX, top: offsetY} = beginPoint.target.getBoundingClientRect();
	const xEnabled = directionEnabled(mode, 'x', chart);
	const yEnabled = directionEnabled(mode, 'y', chart);
	let {top, left, right, bottom, width: chartWidth, height: chartHeight} = chart.chartArea;
	if (xEnabled) {
	left = Math.min(beginPoint.clientX, endPoint.clientX) - offsetX;
	right = Math.max(beginPoint.clientX, endPoint.clientX) - offsetX;
	}
	if (yEnabled) {
	top = Math.min(beginPoint.clientY, endPoint.clientY) - offsetY;
	bottom = Math.max(beginPoint.clientY, endPoint.clientY) - offsetY;
	}
	const width = right - left;
	const height = bottom - top;

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 #256 "Zoom triggered when hiding/showing series by clicking legend", I have created PR #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)?