Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Zoom can be trigger outside of chart region #611

Open
arthurlm opened this issue Dec 22, 2021 · 4 comments
Open

Zoom can be trigger outside of chart region #611

arthurlm opened this issue Dec 22, 2021 · 4 comments
Labels

Comments

@arthurlm
Copy link

arthurlm commented Dec 22, 2021

Hi,

I am using [email protected] and [email protected].
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:

chart zoom

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

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
Copy link

subscribing

@hugo-valcourt
Copy link

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

@ikkala
Copy link

ikkala commented Jul 14, 2023

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
Copy link

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)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants