Ngx-charts: Line Chart Tooltip Error on IE11

[thormentor]

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
Using IE11, on mouse over the chart tooltips are not shown and fires the following error to the console:

ERROR TypeError: Object doesn't support this action
"ERROR"
{
[functions]: ,
__proto__: { },
description: "Object doesn't support this action",
message: "Object doesn't support this action",
name: "TypeError",
number: -2146827843,
stack: "TypeError: Object doesn't support this action
at t.prototype.showTooltip (http://192.168.10.109:4200/vendor.ed59e703e9e868c49dcb.bundle.js:973:169880)
at Anonymous function (Function code:190:9)
at _ (http://192.168.10.109:4200/vendor.ed59e703e9e868c49dcb.bundle.js:309:1441)
at handleEvent (http://192.168.10.109:4200/vendor.ed59e703e9e868c49dcb.bundle.js:309:7854)
at Kt (http://192.168.10.109:4200/vendor.ed59e703e9e868c49dcb.bundle.js:260:1591)
at Anonymous function (http://192.168.10.109:4200/vendor.ed59e703e9e868c49dcb.bundle.js:267:2356)
at Anonymous function (http://192.168.10.109:4200/vendor.ed59e703e9e868c49dcb.bundle.js:715:759)
at t.prototype.invokeTask (http://192.168.10.109:4200/polyfills.ecb620347e80f19f9b11.bundle.js:36:7895)
at onInvokeTask (http://192.168.10.109:4200/vendor.ed59e703e9e868c49dcb.bundle.js:365:7989)
at t.prototype.invokeTask (http://192.168.10.109:4200/polyfills.ecb620347e80f19f9b11.bundle.js:36:7895)",
Symbol(__immutablehash__)_i.yt190o4ktkj: undefined,
Symbol(observable)_h.yt190o4ktkj: undefined,
Symbol(react.element)_j.yt190o4ktkj: undefined,
Symbol(rxSubscriber)_g.yt190o4ktkj: undefined
}

Expected behavior
show tooltips

Reproduction of the problem
I'm able to show bar and line charts in all the major browsers but on IE11 have a problem with line charts. The tooltips works well on bar charts but stop working with line charts firing the above error.

• ngx-charts version: 5.1.2
  

• Angular version: 4.0.0
  

• Browser: [IE11 ]
  

[tomastrajan]

Same problem

[AnnaGranovsky]

To fix this need to add polyfill for MouseEvent
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent#Polyfill

[joseph-schenck]

Adding the polyfill fixes the error in the console and allows tooltips to be shown for me. This doesn't seem to completely fix everything, as hovering over a specific data point shows the tooltip for the data point directly to the left. Is there any solution for this?

[KovalDenys]

Did someone find any solution for the last problem with showing tooltip for the data point directly to the left?

[joseph-schenck]

Hey @KovalDenys,

I found a solution in this thread. It has to do with how they are getting the x position in the TooltipArea functions.

What worked for me, instead of messing around with the ngx-charts files, is to overwrite the mouseMove function in the constructor of the component with will eventually have the ngx charts.

TooltipArea.prototype.mouseMove = function (event) { var xPos = event.pageX - event.target.getBoundingClientRect().left; var closestIndex = this.findClosestPointIndex(xPos); var closestPoint = this.xSet[closestIndex]; this.anchorPos = this.xScale(closestPoint); this.anchorPos = Math.max(0, this.anchorPos); this.anchorPos = Math.min(this.dims.width, this.anchorPos); this.anchorValues = this.getValues(closestPoint); if (this.anchorPos !== this.lastAnchorPos) { var ev = new MouseEvent('mouseleave', { bubbles: false }); this.renderer.invokeElementMethod(this.tooltipAnchor.nativeElement, 'dispatchEvent', [ev]); this.anchorOpacity = 0.7; this.hover.emit({ value: closestPoint }); this.showTooltip(); this.lastAnchorPos = this.anchorPos; } };

[gaurav848]

Hi @AnnaGranovsky @joseph-schenck
I tried to add the polyfill as you suggested but somehow i am getting below 2 Errors while building on the following lines:

1. new MouseEvent('test');

   Error: [ts] Supplied parameters do not match any signature of call target.
   [ts] Only a void function can be called with the 'new' keyword.
   (local var) MouseEvent: (eventType: any, params: any) => MouseEvent

2. window.MouseEvent = MouseEvent;

   Error : [ts] Property 'MouseEvent' does not exist on type 'Window'.

Could you please help if i am missing anything here. Any help is much appreciated.

[AnnaGranovsky]

Hi @gaurav848! As for the first error you can just add check
if (!MouseEvent || typeof MouseEvent !== 'function') { ... add polyfill here }
instead of trying to call new.
And for the second, you can try window['MouseEvent'] = MouseEvent.

Still, as @joseph-schenck mentioned, it is not completely solving the problem.

[gaurav848]

Thanks @AnnaGranovsky for responding so quickly.
I tried your suggestion and now my code looks like below:

if (!MouseEvent || typeof MouseEvent !== 'function') {
  (function (window) {
    try {
      //new MouseEvent('test');
      return false; // No need to polyfill
    } catch (e) {
      // Need to polyfill - fall through
    }

    // Polyfills DOM4 MouseEvent

    var MouseEvent = function (eventType, params) {
      params = params || { bubbles: false, cancelable: false };
      var mouseEvent = document.createEvent('MouseEvent');
      mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

      return mouseEvent;
    }

    MouseEvent.prototype = Event.prototype;
    window['MouseEvent'] = MouseEvent;
  })(window);
}

but still as you mentioned it did not change anything in terms of console errors on the ngx line charts when mousehover/mouseevents on the line chart on IE. Please do let me know if i used your suggestion incorrectly or you find any other solution to this problem.
again Thanks so much and your response is much appreciated!!!

[cmbkla]

@gaurav848 I also encountered this error on the line chart, and the polyfill you posted worked to resolve the problem. If you're still getting errors, I wonder about other polyfills you're importing... we've already pulled in quite a stack of them to get other charts working correctly in IE.

We were already pulling in these:

import 'classlist.js'; import 'core-js/es6'; import 'core-js/es7/array'; import 'core-js/es7/reflect'; import 'core-js/client/shim'; import 'classlist.js'; import 'intl';