Series data points are not reachable on mouse hover in line and area charts with Firefox #469

tobigit · 2017-07-06T14:27:25Z

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
I try to move the mouse cursor over a data point on a line- or area-chart with firefox. But the series-group-tooltip always overlap the data-point I want to reach.

Expected behavior
All data points should be reachable with the mouse cursor.

Reproduction of the problem
Move the mouse cursor to any data point with firefox in this plunker:
https://plnkr.co/edit/WTqX5jmYzCmjZI16gkg9?p=preview

Please tell us about your environment:
Windows 7, IntelliJ

ngx-charts version: 6.0.0

Angular version: 4.2.5

Browser: Firefox 54.0.1
Language: all

The text was updated successfully, but these errors were encountered:

CramericaIndustries · 2017-10-06T17:49:20Z

+1
any workarounds?

ghost · 2017-10-22T16:07:32Z

I think I have the same issue. When I move mouse over the tooltip area it always shows tooltip of an element that has lower x coordinate. Works perfectly in chromium browser.

I think the issue might be in https://github.com/swimlane/ngx-charts/blob/master/src/common/tooltip-area.component.ts#L148.

According to https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX the offsetX property is experimental and should not be used in production.

CramericaIndustries · 2017-11-16T17:45:30Z

Error is still present in Firefox 57.0 (Quantum).

marjan-georgiev · 2017-11-20T22:39:57Z

Does upgrading to ngx-charts 7.0.1 fix this?

CramericaIndustries · 2017-11-20T22:49:23Z

@marjan-georgiev Do I need to upgrade to ng5 to use ngx-charts 7.0.1? Or is it compatible to ng4.4.6?
UPDATE: installed ngx-charts 7.0.1 with ng4.4.6 and got the following exception when executing ng serve:

ERROR in Error: Metadata version mismatch for module /workdir/p4-monitor-angular4/node_modules/@swimlane/ngx-charts/release/index.d.ts, found version 4, expected 3, resolving symbol AppModule in /workdir/p4-monitor-angular4/src/app/app.module.ts, resolving symbol AppModule in /workdir/p4-monitor-angular4/src/app/app.module.ts
    at syntaxError (/workdir/p4-monitor-angular4/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34)
    at simplifyInContext (/workdir/p4-monitor-angular4/node_modules/@angular/compiler/bundles/compiler.umd.js:24979:23)
    at StaticReflector.simplify (/workdir/p4-monitor-angular4/node_modules/@angular/compiler/bundles/compiler.umd.js:24991:13)
    at StaticReflector.annotations (/workdir/p4-monitor-angular4/node_modules/@angular/compiler/bundles/compiler.umd.js:24418:41)
    at _getNgModuleMetadata (/workdir/p4-monitor-angular4/node_modules/@angular/compiler-cli/src/ngtools_impl.js:138:31)
    at _extractLazyRoutesFromStaticModule (/workdir/p4-monitor-angular4/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26)
    at /workdir/p4-monitor-angular4/node_modules/@angular/compiler-cli/src/ngtools_impl.js:129:27
    at Array.reduce (native)
    at _extractLazyRoutesFromStaticModule (/workdir/p4-monitor-angular4/node_modules/@angular/compiler-cli/src/ngtools_impl.js:128:10)
    at Object.listLazyRoutesOfModule (/workdir/p4-monitor-angular4/node_modules/@angular/compiler-cli/src/ngtools_impl.js:53:22)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/workdir/p4-monitor-angular4/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (/workdir/p4-monitor-angular4/node_modules/@ngtools/webpack/src/plugin.js:212:44)
    at _donePromise.Promise.resolve.then.then.then.then.then (/workdir/p4-monitor-angular4/node_modules/@ngtools/webpack/src/plugin.js:448:24)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:169:7)

marjan-georgiev · 2017-11-21T01:34:55Z

Yes, you need angular 5 for ngx-charts v7.

CramericaIndustries · 2017-11-21T08:12:22Z

@marjan-georgiev unfortunately I can't upgrade to ng5 yet because of a nasty bug in ng-cli 1.5.x. However I've tested the ngx-charts v7.0.1 line chart on the demo page and the Firefox problem is still there.

cesco69 · 2017-11-27T08:21:59Z

I tried ngx-charts v7.0.1 on angular 5 and Firefox 57(Quantum) but the problem is still there also. Is there any workaround for this problem?

Luukschoen · 2017-11-28T10:28:37Z

As @cesco69 said, this issue still exists (despite v7.0.1 and new Firefox). @marjan-georgiev could you give us some pointers on how to solve this?

tobigit · 2017-11-28T10:31:55Z

The Problem still exists with latest version of ngx-charts (v7.0.1) and angular 5.

cesco69 · 2017-12-01T15:45:20Z

Same problem exists for IE 11 also

CramericaIndustries · 2017-12-01T15:54:58Z

Same glitch in Edge Browser 16.16299 on Windows 10 Pro as well

Luukschoen · 2017-12-04T13:58:49Z

Okay so for anyone that got stuck here. I just examined the code and came to the conclusion that as @weequ mentioned offsetX in tooltip-area.component.ts could be the culprit here.

Examining the xPos on the mouseMove event, I came to notice that Firefox/IE gave me back entirely different values for event.offsetX. Which led to xPositions that were below zero.

I'm talking about this rule exactly:

const xPos = event.offsetX - this.dims.xOffset;

So I did some searching and came around this issue:

jquery-archive/PEP#217

~~I replaced the event.offsetX with the suggested solution and I've got it working now in IE, Firefox, Safari, Chrome. Didn't test any other browsers atm.~~

Okay so it seems I was a little bit to quick there. If I have a solid fix I will post it over here.

This pull request fixes swimlane#469 where data points aren't reachable through the mouse over event. Since event.offsetX isn't fully supported in all browsers (i.e. it gives different values on IE, Firefox then in Chrome for example), replacing event.offsetX by event.pageX - event.target.getBoundingClientRect().left gives a better cross browser solution.

Luukschoen · 2017-12-04T14:38:59Z

So apparently in Chrome

event.pageX - event.target.getBoundingClientRect().left gives me a different value then event.offsetX as where as in Firefox these two result in exactly the same numbers. The difference between the numbers in Chrome is compensated by subtracting this.dims.xOffset. To make this work in both browsers we could just use
const xPos = event.pageX - event.target.getBoundingClientRect().left; instead of using offsetX and subtracting it with dims.xOffset.

I'm going to submit this as a pull request if i've tested the outcome in IE and Safari as well.

CramericaIndustries · 2017-12-07T18:28:26Z

@Luukschoen did it work?

Luukschoen · 2017-12-07T20:27:59Z

@CramericaIndustries yes it did. I will create a PR in 1, 2, 3 ..

Solves swimlane#469. event.pageX - event.target.getBoundingClientRect().left gives me a different value then event.offsetX as where as in Firefox and IE these two result in exactly the same numbers. The difference between the numbers in Chrome is compensated by subtracting this.dims.xOffset. To make this work in all browsers we could just use const xPos = event.pageX - event.target.getBoundingClientRect().left; instead of using offsetX and subtracting it with dims.xOffset.

CramericaIndustries · 2017-12-08T09:00:06Z

@marjan-georgiev will @Luukschoens fix be included in the next release?

CramericaIndustries · 2017-12-09T10:05:53Z

If somebody wants to apply the patch manually until the new release is out:
Open the file <project-dir>/node_modules/@swimlane/ngx-charts/release/index.js
Then find and replace the line
const xPos = event.offsetX - this.dims.xOffset;
with
const xPos = event.pageX - event.target.getBoundingClientRect().left;
(that is in the TooltipArea.prototype.mouseMove function)

Solves #469. event.pageX - event.target.getBoundingClientRect().left gives me a different value then event.offsetX as where as in Firefox and IE these two result in exactly the same numbers. The difference between the numbers in Chrome is compensated by subtracting this.dims.xOffset. To make this work in all browsers we could just use const xPos = event.pageX - event.target.getBoundingClientRect().left; instead of using offsetX and subtracting it with dims.xOffset.

marjan-georgiev · 2018-02-16T14:20:58Z

This was added and released in 7.1.0

marjan-georgiev added Accept PRs Backlog Bug Effort: Moderate Priority: High labels Aug 17, 2017

tobigit mentioned this issue Sep 7, 2017

Line Chart on Firefox can't select the points #534

Closed

Luukschoen mentioned this issue Dec 4, 2017

Fix for showing tooltips in the right place #663

Closed

9 tasks

Luukschoen mentioned this issue Dec 7, 2017

Fix for wrongly positioned tooltip #671

Merged

9 tasks

joseph-schenck mentioned this issue Jan 11, 2018

Line Chart Tooltip Error on IE11 #384

Open

marjan-georgiev closed this as completed Feb 16, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Series data points are not reachable on mouse hover in line and area charts with Firefox #469

Series data points are not reachable on mouse hover in line and area charts with Firefox #469

tobigit commented Jul 6, 2017

CramericaIndustries commented Oct 6, 2017

ghost commented Oct 22, 2017

CramericaIndustries commented Nov 16, 2017

marjan-georgiev commented Nov 20, 2017

CramericaIndustries commented Nov 20, 2017 •

edited

Loading

marjan-georgiev commented Nov 21, 2017

CramericaIndustries commented Nov 21, 2017 •

edited

Loading

cesco69 commented Nov 27, 2017 •

edited

Loading

Luukschoen commented Nov 28, 2017

tobigit commented Nov 28, 2017

cesco69 commented Dec 1, 2017

CramericaIndustries commented Dec 1, 2017

Luukschoen commented Dec 4, 2017 •

edited

Loading

Luukschoen commented Dec 4, 2017 •

edited

Loading

CramericaIndustries commented Dec 7, 2017

Luukschoen commented Dec 7, 2017

CramericaIndustries commented Dec 8, 2017

CramericaIndustries commented Dec 9, 2017

marjan-georgiev commented Feb 16, 2018

Series data points are not reachable on mouse hover in line and area charts with Firefox #469

Series data points are not reachable on mouse hover in line and area charts with Firefox #469

Comments

tobigit commented Jul 6, 2017

CramericaIndustries commented Oct 6, 2017

ghost commented Oct 22, 2017

CramericaIndustries commented Nov 16, 2017

marjan-georgiev commented Nov 20, 2017

CramericaIndustries commented Nov 20, 2017 • edited Loading

marjan-georgiev commented Nov 21, 2017

CramericaIndustries commented Nov 21, 2017 • edited Loading

cesco69 commented Nov 27, 2017 • edited Loading

Luukschoen commented Nov 28, 2017

tobigit commented Nov 28, 2017

cesco69 commented Dec 1, 2017

CramericaIndustries commented Dec 1, 2017

Luukschoen commented Dec 4, 2017 • edited Loading

Luukschoen commented Dec 4, 2017 • edited Loading

CramericaIndustries commented Dec 7, 2017

Luukschoen commented Dec 7, 2017

CramericaIndustries commented Dec 8, 2017

CramericaIndustries commented Dec 9, 2017

marjan-georgiev commented Feb 16, 2018

CramericaIndustries commented Nov 20, 2017 •

edited

Loading

CramericaIndustries commented Nov 21, 2017 •

edited

Loading

cesco69 commented Nov 27, 2017 •

edited

Loading

Luukschoen commented Dec 4, 2017 •

edited

Loading

Luukschoen commented Dec 4, 2017 •

edited

Loading