Line Chart Tooltip Error on IE11

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 ]

[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!!!

[AnnaGranovsky]

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