Ngx-charts: Series data points are not reachable on mouse hover in line and area charts with Firefox

[tobigit]

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

[CramericaIndustries]

+1
any workarounds?

[weequ]

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]

Error is still present in Firefox 57.0 (Quantum).

[marjan-georgiev]

Does upgrading to ngx-charts 7.0.1 fix this?

[CramericaIndustries]

@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]

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

[CramericaIndustries]

@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]

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]

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]

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

[cesco69]

Same problem exists for IE 11 also

[CramericaIndustries]

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

[Luukschoen]

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:

https://github.com/jquery/PEP/issues/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.

[Luukschoen]

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]

@Luukschoen did it work?

[Luukschoen]

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

[CramericaIndustries]

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

[CramericaIndustries]

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)

[marjan-georgiev]

This was added and released in 7.1.0