What could be causing the ngx-chart TreeMap labels to not display in IE11?

Question

What could be causing the ngx-chart TreeMap labels to not display in IE11?

I am currently utilizing ngx-charts version 10.0.1 to create Treemap charts. My Angular version is 7.2.1. The chart functions as expected in Chrome, but the labels do not appear in IE11. Upon page load, I encounter the following errors in the IE console:

TypeError: Object doesn't support property or method 'forEach' (Note: I am using a forEach loop to process data from the backend, I have also attempted converting it into a regular for loop without success.)

TypeError: Unable to set property 'pointer-events' of undefined or null reference.

Additionally, the hover and click animations are significantly slower in IE compared to Chrome. The tooltip displays the label and value correctly.

Techniques I have attempted so far:

1) After researching forums, I installed classlist.js and included the following links in Index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/classlist.js/classList.min.js"></script>

<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

2) I added animations.js and ensured it was properly installed. 3) Attempted a rollback to ngx-charts version 8.1.0.

However, none of the above methods resolved the issue.

Here is the code snippet from my Polyfills.ts file:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
...
...

(window as any).global = window;
if (!Object.entries) {
    Object.entries = function (obj) {
        var ownProps = Object.keys(obj),
            i = ownProps.length,
            resArray = new Array(i); // preallocate the Array
        while (i--)
            resArray[i] = [ownProps[i], obj[ownProps[i]]];

        return resArray;
    };
}

angular typescript internet-explorer ngx-charts

Answer 1

Answer №1

If you are encountering the pointer events error while hovering over the chart, including the following script either in the index.html file or just the IIFE in the polyfills.ts can resolve the issue:

    <script>
        (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);
    </script>

I also came across an issue with a for each loop in a library. Despite IE11 supporting the forEach loop as per MDN, adding this polyfill proved to be beneficial:

// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {

  Array.prototype.forEach = function(callback, thisArg) {

    var T, k;

    if (this === null) {
      throw new TypeError(' this is null or not defined');
    }

    // Rest of the code snippet remains unchanged
}

Edit

If the above solutions do not work, consider removing unnecessary imports that might cause conflicts (such as d3, ...) or importing the same things multiple times (e.g. shim.min.js in both index.html and polyfills.ts)

To ensure ngx-charts functions correctly, refer to the additions needed in polyfill.ts outlined here.

Answer 2

If you are encountering the pointer events error while hovering over the chart, including the following script either in the index.html file or just the IIFE in the polyfills.ts can resolve the issue:

    <script>
        (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);
    </script>

I also came across an issue with a for each loop in a library. Despite IE11 supporting the forEach loop as per MDN, adding this polyfill proved to be beneficial:

// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {

  Array.prototype.forEach = function(callback, thisArg) {

    var T, k;

    if (this === null) {
      throw new TypeError(' this is null or not defined');
    }

    // Rest of the code snippet remains unchanged
}

Edit

If the above solutions do not work, consider removing unnecessary imports that might cause conflicts (such as d3, ...) or importing the same things multiple times (e.g. shim.min.js in both index.html and polyfills.ts)

To ensure ngx-charts functions correctly, refer to the additions needed in polyfill.ts outlined here.

What could be causing the ngx-chart TreeMap labels to not display in IE11?

Answer №1

Similar questions

Error message: Angular Universal running on Docker encountered an HTTP failure response from an unidentified URL

Angular 2 TypeScript: The concat() function operates as mutable within the framework

Internationalization of deferred-loaded modules within the JHipster application

The type 'Observable<Response>' does not include a property called 'map'

Group multiple typescript files into separate outFile modules

What is the procedure for sending a secondary route parameter to the angular 2 services module?

Avoid connecting redux to a component in TypeScript and React

Ways to incorporate style links in Angular v2 components?

When the child component's form is marked as dirty, the parent component can access it

Using Angular to Generate a File from Form Input and Delivering it to the User

Setting up Angular material typography styling

Guide on enabling the Access-Control-Allow-Origin feature for Angular 5 and Node.js:

Error: TypeError encountered during UI Runtime JSON conversion of Circular Data Structure

Issue encountered while utilizing npm on Visual Studio 2015

What is the best way to make one element's click event toggle the visibility of another element in Angular 4?

Leveraging pipes in Angular 2 within the (click) event handler

Experience Next.js 13 with Chakra UI where you can enjoy Dark Mode without the annoying White Screen Flash or FOUC (flash of unstyled content)

Transmit information to the transcluded instance of a repeated element from a component that is

Hold off on making any promises regarding Angular 2

Accessing collection values from referenced document IDs in Firestore---I have provided a unique version of the text