CODEWITHSUNDEEP
cssinternet-explorerhighcharts
David Nix
David Nix

Reputation: 3334

Internet Explorer 9-11 does not fill g element with color (highcharts)

Using, highcharts I'm trying to get the fill color to work properly on IE. In the picture below, you'll see the background is transparent (no color at all). I need it to be black with an opacity of 0.8.

Changing the fill css property in Firefox/Chrome will change the color.

What do I need to do to get the fill property to show up?

Example Markup:

<g class="highcharts-tooltip" zIndex="8" style="cursor:default;padding:0;white-space:nowrap;" visibility="hidden" opacity="0" transform="translate(295,43)">
   <rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="92" height="46.046875" isShadow="true" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></rect>
   <rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="92" height="46.046875" isShadow="true" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></rect>
   <rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="92" height="46.046875" isShadow="true" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></rect>
   <rect rx="3" ry="3" fill="0.5" x="0.5" y="0.5" width="92" height="46.046875" stroke="#e87c05" stroke-width="1" anchorX="104.5" anchorY="31"></rect>
   <text x="8" y="21" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;color:#ffffff;fill:#ffffff;" zIndex="1">
      <tspan style="fill:#acacac" x="8">Excellent</tspan>
      <tspan style="font-weight:bold" x="8" dy="16">91</tspan>
      <tspan dx="0"> Responses</tspan>
   </text>
</g>

enter image description here

Upvotes: 0

Views: 270

Answers (1)

David Nix
David Nix

Reputation: 3334

It was staring me right in the face. The <rect> elements have a fill of none. Change those, and it works as expected.

Upvotes: 1

Related Questions