IE8 not displayed

[pawelfus]

Example: http://jsfiddle.net/7b8gz/1/

We need to hover over the bars to get them displayed as black ones.

[KacperMadej]

Patterns are not displaying in IE. After hover only columns are visible: Example: http://jsfiddle.net/c3ks8x0k/6/

[nmt-zz]

Hi all, I have the same issue, have you got any solution or may be fill by render the image like this one: http://jsfiddle.net/tannm/7b8gz/9/

[ttd83]

Please help me to fix error. Thanks

[TorsteinHonsi]

I've spent two hours debugging this but honestly haven't found any explanation yet. The pattern fill appears on the columns after hover, which is interesting because it version 1.x (Highcharts 3.x), it was the other way around - the pattern appeared fine on first view but disappeared after hover. I am pretty sure it is some VML peculiarity, it doesn't always reflect changes in the DOM.

[idra003]

I'm not sure that this is a problem with the plug-in, but with the extending method. Not sure what exactly, but if I apply basically the same code to the HighStock's own VMLRenderer, then it works fine.

This is the code I used: (VMLRenderer.fillSetter on line 4794 of highstock.src.js)

    fillSetter: function (value, key, element) {
        var nodeName = element.nodeName;
        if (nodeName === 'SPAN') { // text color
            element.style.color = value;
        } else if (nodeName !== 'IMG') { // #1336
            element.filled = value !== NONE;

            //this.setAttr('fillcolor', this.renderer.color(value, element, key, this));

            if(typeof value == 'object' && value != null) {
                if('pattern' in value) {
                    //element.innerHTML = '<hcv:fill type="tile" color="blue" color2="yellow" src="' + value.pattern + '" />';

                    // Remove previous fills
                    if (element.getElementsByTagName('fill').length) {
                        element.removeChild(element.getElementsByTagName('fill')[0]);                  
                    }
                    var markup;
                    if (value.color1 && value.color2) {
                        markup = this.renderer.prepVML(['<fill color="', value.color1, '" color2="', 
                        value.color2, '" type="pattern" src="', value.pattern, '" />']);
                    } else {
                        markup = this.renderer.prepVML(['<fill type="tile" src="', value.pattern, '" />']);
                    }

                    element.appendChild(
                        document.createElement(markup)
                    );
                    /*                  
                    // Work around display bug on updating attached nodes
                    //Can't use it, because it creates havoc when you move with the navigator
                    if (element.parentNode.nodeType === 1) {
                        element.outerHTML = element.outerHTML
                    }
                    */
                }
            } else {
                this.setAttr('fillcolor', this.renderer.color(value, element, key, this));
            }

        }
    },

As you can see it is in essence identical to the plug-in code, so it leads me to think the problem is with the extending method rather than the active plug-in code.

[UIUXDesigner]

I have same error... How to fix it