Highchart is not displayed while printing it in IE8

[manwendrap]

Tried to print the Highcharts, but only x-axis & y-axis are getting printed and chart is completely blank. After lot of effort I found that in IE8, Browser Mode is : IE8 Compatibility View and Document Mode is : IE8 Standards, so while print highcharts is blank. But when I changed Browser Mode to IE8, it start printing Highchart in correct format. But problem is that Client will not change the browser mode and they want print to work in Browser Mode : IE8 Compatibility View only. So anyone could suggest some solution to it, even we tried to overwrite browser mode using meta but it is not allowed.

[TorsteinHonsi]

I can confirm this, though I am not sure if it can be fixed. What you see in the chart is HTML labels, all VML is missing in the print. What we did in Highcharts was to introduce two different ways of adding VML to the browser - one for IE8 Compat, IE7 and IE6, and one for IE8 standards. The core of this lies in the VMLRenderer.prepVML method, where the IE8 standards uses an xmlns attribute, while the older ones use a namespaced tag.

All this is of course ways of manouvering between VML's countless implementation bugs.

In your case, it seems that you fall between to chairs where you are using the old browser mode and the new document mode. You could try to experiment with the prepVML method - I tried forcing docMode8 to be false, but to no avail.

[j-e-harris]

IE8 in compatibility mode does not recognise the VML tags correctly when printing. Additionally, highcharts sets all the VML tags in IE8 to be namespaced as hcv:* rather than v:*
The solution is to create a css print style (media="print") with the following rule in it:

hcv\\:shape,
hcv\\:fill,
hcv\\:stroke,
hcv\\:shadow,
hcv\\:line {
    behaviour: url{#default#VML};
    display: inline-block; 
}

NOTE that a cover-all css tag WILL NOT WORK in this case ie:
hcv:* { }

So you need to specify each type of element you are using in css in list format.
I rekon that this css could be generated with javascript pretty easily in the highcharts library so that it doesn't have to be manually added.
Whilst most users have moved on from IE8, the reason that I needed to do this was because I am displaying the graphs in an Intranet site and the 'Display Intranet sites in compatibility mode' setting was enabled by default in our organisation's SOE. Would be happy to code something and contrib if you are interested.

Hope this helps ppl!

[TorsteinHonsi]

Thanks for your suggestion!

Unfortunately I am not able to make this work. I set up a demo at http://jsfiddle.net/highcharts/px3FL/. You can load it in IE8 through http://jsfiddle.net/highcharts/px3FL/show . When I click Print Preview in IE it still doesn't show the VML shapes.

At this location in the code, https://github.com/highslide-software/highcharts.com/blob/v3.0.9/js/parts/VmlRenderer.js#L636, you'll see where the CSS rules are set up. Since no media is given, I would expect that this CSS applies to both screen and print, but apparently it doesn't in this case. So perhaps we need some kind of loop that applies it to both.

[j-e-harris]

It appears that the .cssText function will strip out any backslashes when it adds the rules. So that's not working.
I did some fiddling this morning.
There are two key issues that I found:

1. IE8 VML namespace call needs a third argument as such:
   doc.namespaces.add('hcv', 'urn:schemas-microsoft-com:vml', '#default#VML');

2. the userAgent string for IE8 in compatibility mode contains 'MSIE 7.0' however the document.documentMode = 8

I am still using version 2.3.5 (upgrading this soon) but this solution should also work for the latest version.
Basically you need to change the following:

isIE8: userAgent.indexOf('MSIE 8.0') > -1,

to:

isIE8: userAgent.indexOf('MSIE 8.0') > -1 || (userAgent.indexOf('MSIE 7.0') > -1 && doc.documentMode == 8),

and also this:

if (!doc.namespaces.hcv) {
    doc.namespaces.add('hcv', 'urn:schemas-microsoft-com:vml');
}

to:

if (!doc.namespaces.hcv) {
    if (this.isIE8) {
        doc.namespaces.add('hcv', 'urn:schemas-microsoft-com:vml', '#default#VML');
    } else {
        doc.namespaces.add('hcv', 'urn:schemas-microsoft-com:vml');
    }
}

TESTING NOTE: This was tested in IE8 - IE8 comp mode, IE8 standards mode, IE7 mode. It seems to break IE8 running in IE7 standards, and I dont have IE7 or IE9+ available right now to test the browser modes in that, so the solution is perhaps incomplete.

[TorsteinHonsi]

Thanks for your efforts!

"It seems to break IE8 running in IE7 standards, and I dont have IE7 or IE9+ available right now to test the browser modes in that, so the solution is perhaps incomplete."

Okay, then I'm afraid we're not ready for implementing it - we have already done a lot to find the right balance between the countless implementation bugs in VML, so we can't risk anything that can cause another combination of docmodes and browser modes to drop out.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!