jqplot graph background seems to be black in ie8 - html

Question

I'm using jqplot in my website using the following code
$(document).ready(function(){
var xticks = [ '0', '1', '2', '3', '4','5', '6', '7', '8', '9', '10','11', '13','14','15','16','17','18','19','20','21','22','23'];
var data1 = [2,4,6,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,6,3,1,2,2,0,0,0,0,0,0,2,5,6,6,7,6,6,6,5,7,7,6,1,0,0,0,0];
var plot2 = jQuery.jqplot ('chart1', [data1],
{
animate : true,
// Will animate plot on calls to plot1.replot({resetAxes:true})
animateReplot : true,
seriesDefaults : {
pointLabels : {
show : true,
hideZeros : true,
location : 's',
ypadding : 12
},
renderer : $.jqplot.BarRenderer,
rendererOptions : {
varyBarColor : true,
barPadding : -20
}
},
axes : {
xaxis : {
label : 'X axis',
fontFamily : 'OpenSans-Regular',
textColor : '#414141',
renderer : $.jqplot.CategoryAxisRenderer,
labelRenderer : $.jqplot.CanvasAxisLabelRenderer,
tickRenderer : $.jqplot.CanvasAxisTickRenderer,
ticks : xticks,
tickOptions : {
fontFamily : 'OpenSans-Regular',
textColor : '#414141',
angle : -90,
fontSize : '10pt'
}
},
yaxis : {
min : 0,
//max : 30,
tickInterval:5,
label : 'Y axis',
fontFamily : 'OpenSans-Regular',
textColor : '#414141',
// labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions : {
fontFamily : 'OpenSans-Regular',
textColor : '#414141',
formatString : '%.2f',
fontSize : '10pt'
}
}
},
cursor : {
show : true,
zoom : false,
showTooltip : true,
followMouse : true,
useAxesFormatters : true
/*
* To show both x and y values showTooltipDataPosition :true,
* showVerticalLine:true, useAxesFormatters:true
*/
},
legend : {
renderer : $.jqplot.EnhancedLegendRenderer,
show : true,
showSwatches : true,
fontFamily : 'OpenSans-Regular',
marginTop : '100px',
textColor : '#414141',
rowSpacing : '14px',
border : 'none',
background : 'transparent',
placement : 'outsideGrid'
},
grid : {
background : 'transparent',
gridLineColor : '#c5c5c5'
},
seriesColors : [ '#F6BD0F' ],
series : [ {
seriesColors : [ "#D85252" ],
//label : 's1',
color : [ '#D85252' ]
}, {
seriesColors : [ "#F6BD0F" ],
label : 's2',
color : [ '#F6BD0F' ]
} ],
highlighter : {
show : false
}
}
);
});
It works fine in Firefox and IE9 without any issues as in figure1. But in IE8 it looks very bad as in figure2.
I have included excanvas.js as follows
<script type="text/javascript" language="javascript" src="jQuery/jQplot/excanvas.min.js"></script>
IE9 and Firefox
IE8
Here is the working jsfiddle
Can anyone tell me how can I resolve this issue? What I'm doing wrong here? Any help will be appreciated..

Answer 1

Finally I got the answer after research for a day
The issue was with the background property used in jqplot options.
grid : {
background : 'transparent',
gridLineColor : '#c5c5c5'
}
I fixed it by replacing 'transparent' using 'rgba(255, 255, 255, 0.1)' in my code and it is working in all browsers including IE8. The same thing can be achieved by using background:url('blank.gif')
I got help from the following links
Highcharts chart option backgroundColor:'transparent' showing black on IE 8
IE CSS bug background color transparent behaves differently to background-color