Horizontal legend broken using IE11 - Windows 8.1

[eolsson]

Environment: Internet Explorer 11 under the preview build of Windows 8.1

Legend functionality, including legend text and click events, is diminished when a legend's layout property is set to 'horizontal'. Legend items appear as colored bars with no text and no clickable area. Switching the layout to vertical results in a properly rendered and functioning legend.

[olegd]

I'm also experiencing this issue. The legend labels on the IE11 are not visible.

[dcornali]

Yep, I'm seeing this on our application as well on IE11. However, in our rendering, where we use a vertical alignment of the legend items, all but the last legend items are invisible.

[TorsteinHonsi]

It is a rendering bug in IE11, I'll try to isolate it and report it to Microsoft. Meanwhile, we can work around it by running Legend.positionItem in a callback. This workaround can be added anywhere in your page or JavaScript after Highcharts is loaded:

    // Workaround for Highcharts issue #2030, legend items not displaying in IE11.preview
    (function (H) {
        if (/Trident.*?11\.0/.test(navigator.userAgent)) {
            H.wrap(H.Legend.prototype, 'positionItem', function (proceed, item) {
                var legend = this;
                setTimeout(function () {
                    proceed.call(legend, item);
                });
            });
        }
    }(Highcharts));
    // End workaround

If Microsoft fail to fix the bug before IE11 is released, we'll add a variant of the workaround to the Highcharts code base.

Live demo at http://jsfiddle.net/highcharts/xvx7K/

[olegd]

Thank you! I can confirm that this workaround is working.

[dcornali]

You will need to re-open this issue, as the fix you describe here does not address the rendering of legend items during Export to PNG. To fix it correctly, you must call positionItem(), followed immediately by a delayed call to positionItem in the case of IE11. Otherwise, you get a very funky PNG on export.

For example, if you go to http://jsfiddle.net/highcharts/xvx7K/ and add the exporting.js script while running on an IE11 browser, you get a chart legend where the legend items overlap each other (see screenshot, attached)

[davhdavh]

This workaround throws exception for me in ie11, fixed by NOT applying the workaround.
Only happens in case I destroy a chart and create another. Cant repro trivially in jsfiddle

[TorsteinHonsi]

No error seen at http://jsfiddle.net/highcharts/298Hr/

[davhdavh]

I was able to reduce it to this short testcase:
http://jsfiddle.net/298Hr/3/

On Wed, Dec 11, 2013 at 3:48 PM, highslide-software <
notifications@github.com> wrote:

No error seen at http://jsfiddle.net/highcharts/298Hr/

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2030#issuecomment-30303358
.

Dennis

[TorsteinHonsi]

The error probably only happens when you destroy a chart directly after creating it, in the same thread.