New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Horizontal legend broken using IE11 - Windows 8.1 #2030

Closed
eolsson opened this Issue Jul 12, 2013 · 9 comments

Comments

Projects
None yet
5 participants
@eolsson
Contributor

eolsson commented Jul 12, 2013

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

This comment has been minimized.

olegd commented Aug 28, 2013

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

@dcornali

This comment has been minimized.

dcornali commented Aug 28, 2013

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

This comment has been minimized.

Collaborator

TorsteinHonsi commented Aug 29, 2013

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

This comment has been minimized.

olegd commented Aug 29, 2013

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

@dcornali

This comment has been minimized.

dcornali commented Oct 4, 2013

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)

issue2030-export-to-png-ie11

@davhdavh

This comment has been minimized.

davhdavh commented Dec 10, 2013

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

This comment has been minimized.

Collaborator

TorsteinHonsi commented Dec 11, 2013

@davhdavh

This comment has been minimized.

davhdavh commented Dec 12, 2013

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

This comment has been minimized.

Collaborator

TorsteinHonsi commented Dec 12, 2013

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment