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

Zooming issue in on inverted chart #18103

Closed
leonardomathon opened this issue Dec 7, 2022 · 2 comments · Fixed by #18827
Closed

Zooming issue in on inverted chart #18103

leonardomathon opened this issue Dec 7, 2022 · 2 comments · Fixed by #18827

Comments

@leonardomathon
Copy link

Expected behaviour

I am using an inverted chart to create a timeline. Zooming is enabled and works most of the time, however when want to zoom and place my cursor on the line of the first category of the y-axis (actually the x-axis since its inverted), and drag to zoom the blue zoom effect is shown but the graph does not zoom in.

This bug occurs when you start zooming in between the red lines.
image

The GIF below shows the problem. The first two zooms work, the third zoom shows the problem. Another strange thing is that when we zoom in normally, the zoom button shows. But if you then zoom in by starting at the first category, the zoom button disappears.
timeline

Actual behaviour

Zoom should work as expected.

Live demo with steps to reproduce

See JS fiddle below. Note that I've removed my data, and behavior stays the same.
https://jsfiddle.net/leonardomathon/58ojyrqm/3/

Product version

Latest version of Highcharts from CDN

Affected browser(s)

All major browsers, latest versions (Chrome, Edge, Firefox)

@bm64
Copy link
Member

bm64 commented Dec 9, 2022

Hello @leonardomathon and thanks for reporting the issue. It looks like its broken since v10.3.0.

Internal note:
Bisected to: eafc087

@pawelfus
Copy link
Contributor

pawelfus commented Apr 5, 2023

Workaround:

Demo: https://jsfiddle.net/BlackLabel/n5jv4kq3/
Plugin:

Highcharts.addEvent(Highcharts.Chart, 'afterIsInsidePlot', function(event) {

  const {
    inverted,
    plotBox,
    plotLeft,
    plotTop,
    scrollablePlotBox
  } = this;

  const options = event.options;

  let scrollLeft = 0,
    scrollTop = 0;

  if (options.visiblePlotOnly && this.scrollingContainer) {
    ({
      scrollLeft,
      scrollTop
    } = this.scrollingContainer);
  }

  const series = options.series,
    box = (options.visiblePlotOnly && scrollablePlotBox) || plotBox,
    x = event.x,
    y = event.y,
    e = event;

  event.isInsidePlot = true;

  if (!options.ignoreX) {
    const xAxis = (
      series &&
      (inverted && !this.polar ? series.yAxis : series.xAxis)
    ) || {
      pos: plotLeft,
      len: Infinity
    };

    const chartX = options.paneCoordinates ?
      xAxis.pos + x : plotLeft + x;

    if (!(
        chartX >= Math.max(
          scrollLeft + plotLeft,
          xAxis.pos
        ) &&
        chartX <= Math.min(
          scrollLeft + plotLeft + box.width,
          xAxis.pos + xAxis.len
        )
      )) {
      e.isInsidePlot = false;
    }
  }

  if (!options.ignoreY && e.isInsidePlot) {
    const yAxis = (
      !inverted && options.axis && !options.axis.isXAxis && options.axis
    ) || (
      series && (inverted ? series.xAxis : series.yAxis)
    ) || {
      pos: plotTop,
      len: Infinity
    };

    const chartY = options.paneCoordinates ?
      yAxis.pos + y : plotTop + y;

    if (!(
        chartY >= Math.max(
          scrollTop + plotTop,
          yAxis.pos
        ) &&
        chartY <= Math.min(
          scrollTop + plotTop + box.height,
          yAxis.pos + yAxis.len
        )
      )) {
      e.isInsidePlot = false;
    }
  }

  return e;
});

Internal note:
We compare plotTop with yAxis.pos, which shouldn't happen in an inverted chart.

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

Successfully merging a pull request may close this issue.

5 participants