Touch support for onMouseMove event Broken

[zee0786]

Description

Steps to Reproduce

1. Create a graph and open browser dev console with mobile view.
2. Try dragging graph crosshair across the data points

Expected Behavior

the cross hairs should move

Actual Behavior

the cross hairs just crash and disappear when dragged

Screenshots

working in 3.46.0 but broken in version 3.47.0

Reproduction Link

[rosco54]

Perhaps I've misunderstood or have a different environment but I don't see any difference between 3.46.0 and 3.47.0. I'm dragging with left mouse pressed to simulate touch on the mobile simulation device.

Here's a screenshot (you may be able to see what I'm not doing to reproduce the issue).

You can see in the source code window that it's running 3.47.0. I had to double check to make sure Chrome was reloading files and was running the version I assumed it was. The crosshairs moved smoothly across the chart with the line/area graph shown.

[brianlagunas]

This is why we require reproduction links. There could be something small like a single property that causes the issue that isn't being considered when someone tries to guess at how to replicate it. Closing until a reproduction link has been provided.

[zee0786]

Can you please try the following link

https://playcode.io/1840192

[zee0786]

Also when the graph date is updated(only when data is updated and not for fresh loading) from no data to 1 data. it shows a vertical line from x axis till the marker(unexpected behavior). Doesn't happen when 2 data points are loaded. you can try deleting any one data in the code provided above to reproduce this issue

[zee0786]

@brianlagunas Hi, Do we have any update on this?

[zee0786]

Hi @rosco54 Can you please look into this.
I'm not able to upgrade my version due to this broken change.

[rosco54]

I could not get your playcode link to work but there's an obvious suspect commit (0419bb5) that went into 3.47.0 that @junedchhipa might be able to look at.

PS. "Obvious" only because it matches keywords in the title of this report.

I also submitted a commit to 3.47.0 (6a300a5) that affects event listeners. It is in svg.js and was to fix an issue. Quote from the commit message: This change exposed the disableDefault in passive event listener common issue, which was resolved by setting "passive: false" in svg.js.

[zee0786]

@rosco54 I have fixed the link. You may retry now

I could not get your playcode link to work but there's an obvious suspect commit (0419bb5) that went into 3.47.0 that @junedchhipa might be able to look at.

PS. "Obvious" only because it matches keywords in the title of this report.

I also submitted a commit to 3.47.0 (6a300a5) that affects event listeners. It is in svg.js and was to fix an issue: from the commit message, This change exposed the disableDefault in passive event listener common issue, which was resolved by setting "passive: false" in svg.js.

[rosco54]

I get a chart now but it has only two points very close together. What are we looking for that demonstrates the issue? How do I change the ApexCharts version to compare. (I'm not familiar with REACT at all.)

…

On Mon, 29 Apr 2024, 10:18 pm zee0786, ***@***.***> wrote: @rosco54 <https://github.com/rosco54> I have fixed the link. You may retry now I could not get your playcode link to work but there's an obvious suspect commit (0419bb5 <0419bb5>) that went into 3.47.0 that @junedchhipa <https://github.com/junedchhipa> might be able to look at. PS. "Obvious" only because it matches keywords in the title of this report. I also submitted a commit to 3.47.0 (6a300a5 <6a300a5>) that affects event listeners. It is in svg.js and was to fix an issue: from the commit message, This change exposed the disableDefault in passive event listener common issue, which was resolved by setting "passive: false" in svg.js. — Reply to this email directly, view it on GitHub <#4330 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BGBUF44ROZZ5PPFDCCGEZQTY7Y3CNAVCNFSM6AAAAABEXK32UOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOBSGU4DCMRZG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[zee0786]

after we open developer console and switch to mobile view,
when we click on the graph a tooltip with a crosshair appears but when I try dragging it, the tooltip and the crosshairs dissapear. It was working in apex charts version 3.46.0. here is the link for the working behavior with apexcharts@3.46.0
https://playcode.io/1852753

[rosco54]

I have done as you describe in Chrome developer in mobile mode as well as using an actual mobile phone (Samsung Galaxy S22 Ultra). I see the same behaviour on both playcode links. In Chrome I click-drag the mouse and the crosshair moves between the two points and does not disappear. On my phone I use the stylus pen to pass over the points without making contact with the screen and the crosshair appears then moves from one point to the other and then stays on that point after moving the pen away from the screen. If I touch the screen with the pen or finger, the crosshair appears as if the point is tapped then disappears if I drag to the other point. I can't tell if this is correct behaviour or not but I don't see any difference between the two versions of ApexCharts on either device.

…

On Tue, 30 Apr 2024, 12:21 am zee0786, ***@***.***> wrote: after we open developer console and switch to mobile view, when we click on the graph a tooltip with a crosshair appears but when I try dragging it, the tooltip and the crosshairs dissapear. It was working in apex charts version 3.46.0. here is the link for the same behavior with ***@***.*** https://playcode.io/1852753 — Reply to this email directly, view it on GitHub <#4330 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BGBUF42YFBBYNOWS2PVZ2FLY7ZJPDAVCNFSM6AAAAABEXK32UOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOBSHA4DKNRYG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[zee0786]

It is possibly because playcode is unable to keep different versions in different projects under one userid (possibly a bug with playcode). Hence it do not loads the dependencies again on reload and picks from the browser application storage possibly. (I found it in dev console's sources in apexcharts.common.js file). I cleared the application data and reloaded https://playcode.io/1840192
Hence now I can see apexcharts.common.js version again to 3.49.0. you may retry now.

[rosco54]

I see this at the top of apexcharts.common.js (after clearing out my browser cache as well):

 * ApexCharts v3.46.0
 * (c) 2018-2024 ApexCharts
 * Released under the MIT License.
 */

I will take your ApexCharts config from Area.js and try to run it from a vanilla html file, without all the playcode/REACT wrapping. But that's what I did previously IIRC.

[zee0786]

You may try deleting the complete storage of this URL and then retry. I'm sure you might get the version 3.49.0 correctly

[rosco54]

Apparently clearing the cache isn't enough, so an entirely new browser did the trick. The version is:

/*!
 * ApexCharts v3.49.0
 * (c) 2018-2024 ApexCharts
 * Released under the MIT License.
 */

In short, you're setting the wrong month in App.jsx:

  const graphValueChange = (z) => {setSelectedGraphValue(z)};
  useEffect(() => {
    setIsMounted(true);
    setTimeout(
      () =>
        setGraphData([
          { x: new Date("2024-04-09T18:30:00.000Z"), y: 35 },
          { x: new Date("2024-04-10T18:30:00.000Z"), y: 30 }
        ]),
      2000
    );
  }, []);

It should be:

  const graphValueChange = (z) => {setSelectedGraphValue(z)};
  useEffect(() => {
    setIsMounted(true);
    setTimeout(
      () =>
        setGraphData([
          { x: new Date("2024-05-09T18:30:00.000Z"), y: 35 },
          { x: new Date("2024-05-10T18:30:00.000Z"), y: 30 }
        ]),
      2000
    );
  }, []);

With that change it works just as it does in 3.46.0.

[zee0786]

I agree the data belongs to the last month when I actually posted this bug. I guess you misunderstood my point. Apparently my issue is not related to display the markers. Instead my issue is it doesn't display the tooltip(with cross hairs) when the touch is dragged on the graph across the markers.The touch click is functional, but the touch move is not functional.

[rosco54]

Click drag did not work for me in either 3.46.0 or 3.49.0. I just don't see any difference between the two versions.

…

On Fri, 3 May 2024, 3:32 am zee0786, ***@***.***> wrote: I agree the data belongs to the last month when I actually posted this bug. Apparently my issue is not related to display the markers. Instead my issue is it doesn't display the tooltip(with cross hairs) when the touch is dragged on the graph across the markers.The touch click is functional, but the touch move is not functional. — Reply to this email directly, view it on GitHub <#4330 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BGBUF44WEG5RG4HOMTVJKCLZAJ2BNAVCNFSM6AAAAABEXK32UOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOJRGEZDQNZYGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[rosco54]

OK. I've reduced your example to the following html that I can run and debug and switch to different apexchart versions.

I can see the difference.

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.46.0"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-10">
        <div id="chart"></div>
      </div>
    </div>
  </div>

  <script>

    const color = "#3c9d47";
    let options = {
    series: [{
            name: "Weight",
            type: "line",
            data: [[1715824799500, 35],[1716092639400, 30]]
        }],
        chart: {
            id: "chart",
            type: "line",
            foreColor: color,
            toolbar: {
                autoSelected: "pan",
                show: false
            },
        },
        colors: [color],
        dataLabels: {
            enabled: false
        },
        markers: {
            size: 3,
            strokeWidth: 1,
        },
        xaxis: {
            type: "datetime",
            min: 1715824799500 - 100000000,
            max: 1716092639400 + 100000000,
            tooltip: {
                enabled: true,
                offsetY: 0
            },
            labels: {
                show: true,
                formatter: (value) => new Date(value).getTime()
            }
        },
        yaxis: {
            min: 0,
            tickAmount: 3
        }
    };

    var chart = new ApexCharts(document.querySelector("#chart"), options);

    chart.render();

  </script>

</body>

</html>

[rosco54]

@junedchhipa @zee0786 @sama3926 Building 3.49.0 with commit (0419bb5) backed out restores the 3.46.0 behaviour, fixing this issue. I've referenced this back to @sama3936 as the author of the pull request #4240 that introduced this commit.

[zee0786]

@rosco54 Can you please mention here, when can I expect this to be fixed if it has been addressed at your end.

[rosco54]

@junedchhipa @sama3926 the description in pull request #4240 suggests that the associated commit (0419bb5) could be a workaround rather than a root-cause fix. It has broken previously relied upon functionality and to be fair should probably be reverted until it can be reviewed.

[junedchhipa]

Reverted PR #4240 with #4462 which should fix this issue