Highcharts chart option backgroundColor:'transparent' showing black on IE 8

Highcharts chart option backgroundColor:'transparent' showing black on IE 8

histogram = new Highcharts.Chart({
chart: { renderTo: 'histogram', defaultSeriesType: 'bar',
backgroundColor:'transparent'
}

This works fine on I.E 9 and others but fails on I.E 8 and Safari anyone has any idea why ?

92085 次浏览
小开

May be you have to write 

filter:0 !important;

in your css.

小开

Can you try this -

backgroundColor: null

See on: jsfiddle

小开
最佳答案

Try this solution: 

histogram = new Highcharts.Chart({
chart: { renderTo: 'histogram', defaultSeriesType: 'bar',
backgroundColor:'rgba(255, 255, 255, 0.0)'
}
小开

If you can access the highcharts.js file go to the backgroundColor line (around 479) and change line like backgroundColor:"rgba(255, 255, 255, 0)". It will change all backgrounds of the charts to transparent

小开

I found this in Highcharts sources:

Empirical lowest possible opacities for TRACKER_FILL

  • IE6: 0.002
  • IE7: 0.002
  • IE8: 0.002
  • IE9: 0.00000000001 (unlimited)
  • IE10: 0.0001 (exporting only)
  • FF: 0.00000000001 (unlimited)
  • Chrome: 0.000001
  • Safari: 0.000001
  • Opera: 0.00000000001 (unlimited)

TRACKER_FILL = 'rgba(192,192,192,' + (hasSVG ? 0.0001 : 0.002) + ')'

So you can set the chart background color to 'rgba(255,255,255,0.002)' and it runs in the most important browsers.

小开

backgroundColor: 'transparent' also working if you need type safety.

小开 
backgroundColor:'rgba(255, 255, 255, 0.0)',
小开

You should use this :

.highcharts-background {
fill: transparent;
}

Documentation

Full example: 

Highcharts.chart('container', {
chart: {
type: 'line',
styledMode: true
},
title: {
text: 'Chart border and background by CSS'
},


xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},


legend: {
layout: 'vertical',
floating: true,
align: 'left',
x: 100,
verticalAlign: 'top',
y: 70
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
@import "https://code.highcharts.com/css/highcharts.css";


.highcharts-background {
fill: #efefef;
stroke: #a4edba;
stroke-width: 2px;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 400px"></div>


提交答案