Skip to content
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
Closed

Horizontal legend broken using IE11 - Windows 8.1 #2030

eolsson opened this issue Jul 12, 2013 · 9 comments

Comments

@eolsson
Copy link
Contributor

@eolsson 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
Copy link

@olegd olegd commented Aug 28, 2013

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

@dcornali
Copy link

@dcornali 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
Copy link
Collaborator

@TorsteinHonsi 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
Copy link

@olegd olegd commented Aug 29, 2013

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

@dcornali
Copy link

@dcornali 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
Copy link

@davhdavh 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
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Dec 11, 2013

@davhdavh
Copy link

@davhdavh 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
Copy link
Collaborator

@TorsteinHonsi 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants