My flotchart is rendering incorrectly, in two target browsers (ie8 and firefox) this graph renders with grid lines in front of the data
In Chrome and Safari no lines appear at all, which is the desired outcome. In Internet Explorer 8 the graphs are rendered as VML and I was able to isolate the grid lines as vml objects, unfortunately the CSS involved in hiding those objects would be tricky while limited to CSS2 and then that would not work for firefox, where the elements of the graph are not rendered as separate elements.
Here is the graph code http://jsfiddle.net/gamm/t3Vqh/2/
var dataset = [overdue, open, completed];
var options = {
series: {
stack: true,
bars: {
show: true
}
},
bars: {
align: "center",
horizontal: false,
barWidth: .8,
lineWidth: 0
},
grid: {
borderWidth: 0,
borderColor: null,
backgroundColor: null,
labelMargin: 10,
minBorderMargin: 10
},
yaxis: {
tickColor: "FFFFFF"
},
xaxis: {
tickColor: "FFFFFF",
ticks: [
[1, "Public Works"],
[2, "Sanitation"],
[3, "Mayor"],
[4, "L&I"],
[5, "Police"]
]
},
legend: {
position: 'ne',
show: true
}
};
$.plot($("#example-section15 #flotcontainer"), dataset, options);
There are two things happening here:
It looks like Flot has always drawn grid lines above series fills. This has never been considered a bug because the lines are by default very light, and the effect is much less noticeable when the bars (or lines, etc.) have borders.
The reason why you have black lines in IE is because "FFFFFF" isn't a valid color-spec. If you instead use "#ffffff" (or "transparent") then IE looks the same as the other browsers, which are more forgiving. This isn't restricted to IE8 or Excanvas; even IE10 chokes on that format.
The former might be worth submitting as an issue on Github, since it is arguably a bug.