Highcharts v11.3 doesn't work properly on internet explorer 11 #21098

lucaferrero-ors · 2024-04-30T13:26:41Z

We recently updated our application from highcharts v7 to the v11.3; since we need to be compatible with internet explorer 11, we load the library (highstock) from the es5 folder as shown here https://www.highcharts.com/docs/getting-started/system-requirements.
All the charts are drawn but we encountered the following problems:

There is no way to show the tooltip.
The event click doesn't work, we have to click several times on the chart (we especially tested pie charts) and only few times the event is fired.

Unfortunately I haven't found a fiddle that works with ie11 or edge in internet explorer mode.
Here there is an example you can try on internet explorer:

<html>
	<head>		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<script language="javascript" type="text/javascript" src="https://code.highcharts.com/es5/highstock.js"></script>
		<script type="text/javascript"> 	
	$(function () {
		$('#container').highcharts({
		
			chart: {
				type: 'pie'
			},
			plotOptions: {
				series: { 
					cursor: 'pointer' 
				},
				pie: {  
					allowPointSelect: true, 
					cursor: 'pointer',
					dataLabels: {
						enabled: false
					},
					showInLegend: false,
					
					events: {
						click: function(event) {
							// event click function...
							alert ("clicked");
						}					
					}
				}
			},
			tooltip: {
				enabled: true
			},
			series: [
				{
					name: 'Percentage',
					colorByPoint: true,
					data: [
						{
							name: 'Water',
							y: 55.02
						},
						{
							name: 'Fat',                    
							y: 26.71
						},
						{
							name: 'Carbohydrates',
							y: 1.09
						},
						{
							name: 'Protein',
							y: 15.5
						},
						{
							name: 'Ash',
							y: 1.68
						}
					]
				}
			]
		});
		});

		</script>
	<head>
	<body>
		<div id="container">
		</div>
	</body>
</html>

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

karolkolodziej · 2024-05-06T06:41:14Z

Hi @lucaferrero-ors! I'm sorry for not getting back to you sooner.

Have you tried any other Highcharts version in between? I'm asking because I have no way to test it in IE11 and maybe we can pinpoint where the issue started.
Also, do you get any errors/warnings?

lucaferrero-ors · 2024-05-06T07:55:41Z

Hi Karol!

I made the test both with a virtual machine (Windows 7 with IE11 installed) and in a windows 11 machine using Edge set with internet explorer mode.
The behavior is the same in both cases, so if you don't have a virtual machine, you can try it by using Edge loading the page in Internet Explorer Mode:

After setting it, an edge's dialog is shown telling that the page is going to be reload in IE11 compatibility mode:

Then you can reproduce the situation.

I don't see any errors/warnings in the console.

We tryed also some previous versions of highcharts and we found out that:

the tooltip stops working from the version 11.0.0 (the chart isn't drawn on versions 11.0 and 11.1... then from the 11.2 the chart is shown but the tooltip and the click event don't work);
the click event stops working from the version 10.0.0 (this version doesn't provide the es5 folder);

Out of curiosity I also did some tests with other types of charts:

for the area type the series isn't drawn;
charts with horizontal bars aren't shown;
for any type of chart the tooltip and the click event don't work;

KacperMadej · 2024-05-06T12:44:35Z

Thank you for the details @lucaferrero-ors .

The dev tools are not working in Edge when running in ie mode but this can be resolved as explained here.

The Highcharts Stock build for es5 is missing the polyfill entirely.
Let's fix this by using Highcharts Core + Stock as a module.

Other things are failing due to different reasons that are noted below but in the end, there's a workaround in 3 steps:

Add this code before the script tags that are loading Highcharts:

        <script>
            // Start with the polyfill so 
            if (!Array.prototype.includes) {
                // eslint-disable-next-line no-extend-native
                Array.prototype.includes = function (searchElement, fromIndex) {
                    return this.indexOf(searchElement, fromIndex) > -1;
                };
            }
            if (!Array.prototype.find) {
                // eslint-disable-next-line no-extend-native
                Array.prototype.find = function (predicate, thisArg) {
                    for (var i = 0; i < this.length; i++) {
                        if (predicate.call(thisArg, this[i], i, this)) {
                            return this[i];
                        }
                    }
                };
            }
            if (!Object.entries) {
                Object.entries = function (obj) {
                    var keys = Object.keys(obj), iEnd = keys.length, entries = [];
                    for (var i = 0; i < iEnd; ++i) {
                        entries.push([keys[i], obj[keys[i]]]);
                    }
                    return entries;
                };
            }
            if (!Object.values) {
                Object.values = function (obj) {
                    var keys = Object.keys(obj), iEnd = keys.length, values = [];
                    for (var i = 0; i < iEnd; ++i) {
                        values.push(obj[keys[i]]);
                    }
                    return values;
                };
            }

            // Add another polyfil
            (function () {
                if (typeof window.CustomEvent === "function") return false;

                function CustomEvent(event, params) {
                    params = params || { bubbles: false, cancelable: false, detail: undefined };
                    var evt = document.createEvent('CustomEvent');
                    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
                    return evt;
                }

                CustomEvent.prototype = window.Event.prototype;

                window.CustomEvent = CustomEvent;
            })();

            // Extend Pointer so it doesn't crash in IE on composition
            window.addEventListener('HighchartsModuleLoaded', function(e) {
                if (e.detail.path === 'Core/Pointer.js') {
                    e.detail.module.dissolve = function() {
                        // A proper dissolve would be nice to have
                    };
                }
            });

        </script>

Load Highcharts Core + Stock as a module:

<script language="javascript" type="text/javascript" src="https://code.highcharts.com/es5/highcharts.src.js"></script>
<script language="javascript" type="text/javascript" src="https://code.highcharts.com/es5/modules/stock.src.js"></script>

After Highcharts and its modules are loaded but before any chart is created add this:

        // Add another override
        Highcharts.Pointer.prototype.inClass = function (element, className) {
            var elem = element, elemClassName;
            while (elem) {
                elemClassName = Highcharts.attr(elem, 'class');
                if (elemClassName) {
                    if (elemClassName.indexOf(className) !== -1) {
                        return true;
                    }
                    if (elemClassName.indexOf('highcharts-container') !== -1) {
                        return false;
                    }
                }
                // elem = elem.parentElement; // Old code
                // Changed
                elem = elem.parentNode;
                if (
                    elem === document.documentElement ||
                    elem === window.document
                ) {
                    elem = null;
                }
                // End of change
            }
        };

Internal notes:

The Highcharts Stock build for es5 lacks the polyfill and 'Core/MSPointer.js' module.
'masters-es5/highcharts.js' fails on G.Pointer.dissolve(); as mentioned here. Looks like this merge scrapped dissolve. MSPointer adds the same event (chart's beforeRender) later and overrides the Pointer event (by this.pointer = new MSPointer...).
Extensions/BorderRadius.js tries to use Array's includes function but this is done before the polyfill so throws.
cannot hack using HighchartsModuleLoaded because CustomEvent's typeof is "object"` and not a function but there's a solution.

lucaferrero-ors · 2024-05-08T08:23:43Z

Thanks for the feedback; applying this workaround the click event works for all our charts. There is still a problem with the tooltip: it's not displayed.

One more question: are you planning to release a version with these fixes in the future?

Thanks in advance.

KacperMadej · 2024-05-08T13:57:33Z

@lucaferrero-ors
Thank you for testing the workaround. Please try the additions explained below. If you find anything else not working and related please let me know - maybe later all could be fixed in one go.

IE11 does not support SVG element: feDropShadow so the tooltip that uses that filter (to add a shadow) by default is not visible at all. This can be disabled using the tooltip's shadow option or you could switch to a full HTML tooltip with tooltip options like:

            tooltip: {
                enabled: true,
                backgroundColor: null,
                borderWidth: 0,
                shadow: false,
                useHTML: true,
                style: {
                    padding: 0
                }
            },

With additional CSS required like:

.highcharts-tooltip > span {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid silver;
    border-radius: 3px;
    box-shadow: 1px 1px 2px #888;
    padding: 8px;
}

(the style is copied from the tooltip.useHTML API reference demo but with the background adjusted to make it work in IE11)

One more question: are you planning to release a version with these fixes in the future?

Yes, the issue is still open. I'll try to bump up the priority for this problem.

lucaferrero-ors · 2024-05-10T12:18:31Z

thank you so much, we tryed the workaround and now the tooltip works too; we tryed both Internet explorer 11 and Edge in Internet explorer mode and the result shown was the same.
(it was not necessary for us to add the CSS code).

Do you have an idea of when you might release the version with the fix?

Thanks.

KacperMadej · 2024-05-10T12:57:41Z

At this very moment, there is no official next version release date. It can be expected within the next few weeks, but there is no proper fix implemented yet. After someone is assigned to this issue and it is closed then the very next release will have the fix.

karolkolodziej added Status: Can't reproduce Status: Pending reply labels May 6, 2024

KacperMadej added Type: Bug Status: Has workaround and removed Status: Can't reproduce labels May 6, 2024

karolkolodziej added the Product: Highcharts label May 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Highcharts v11.3 doesn't work properly on internet explorer 11 #21098

Highcharts v11.3 doesn't work properly on internet explorer 11 #21098

lucaferrero-ors commented Apr 30, 2024 •

edited by highsoft-asagh-bot

karolkolodziej commented May 6, 2024

lucaferrero-ors commented May 6, 2024

KacperMadej commented May 6, 2024

lucaferrero-ors commented May 8, 2024

KacperMadej commented May 8, 2024

lucaferrero-ors commented May 10, 2024

KacperMadej commented May 10, 2024

Highcharts v11.3 doesn't work properly on internet explorer 11 #21098

Highcharts v11.3 doesn't work properly on internet explorer 11 #21098

Comments

lucaferrero-ors commented Apr 30, 2024 • edited by highsoft-asagh-bot

karolkolodziej commented May 6, 2024

lucaferrero-ors commented May 6, 2024

KacperMadej commented May 6, 2024

lucaferrero-ors commented May 8, 2024

KacperMadej commented May 8, 2024

lucaferrero-ors commented May 10, 2024

KacperMadej commented May 10, 2024

lucaferrero-ors commented Apr 30, 2024 •

edited by highsoft-asagh-bot