Column Chart - Bars floating above axis instead of on it

[Brian Ouellette]

I'm seeing an issue in IE only (IE8 and IE8 Compatibility Mode, Chrome
and Firefox display fine) where some of the columns in the column
chart are not properly aligned with the X axis. You can see an example
of this here: http://i.imgur.com/OCIEu.png

I have other charts where the "floating" bars are the first two in the
group of three and only the first of the three. Is there anything I
can do about this?

Code used to produce the image is below.

google.load('visualization', '1.0', { 'packages': ['corechart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value1-1');
data.addColumn('number', 'Value1-2');
data.addColumn('number', 'Value2-1');
data.addColumn('number', 'Value2-2');
data.addColumn('number', 'Value3-1');
data.addColumn('number', 'Value3-2');
data.addRow(['Item1',180,0,null,null,null,null]);
data.addRow(['Item1',null,null,138,0,null,null]);
data.addRow(['Item1',null,null,null,null,100,0]);
data.addRow([null,null,null,null,null,null,null]);
data.addRow(['Item2',73,0,null,null,null,null]);
data.addRow(['Item2',null,null,0,0,null,null]);
data.addRow(['Item2',null,null,null,null,0,0]);
data.addRow([null,null,null,null,null,null,null]);
var options = { title: 'Column Chart Example',
width: 1024,
height: 225,
isStacked: true,
legend: {position: 'none'},
hAxis: {
showTextEvery: 4,
slantedText: true
},
series: [{color: '#d00000'}, {color: '#ca9717'}, {color: '#0000ca'},
{color: '#ff9a00'}, {color: '#007700'}, {color: '#72ae7b'}]
};
var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div'));
var chartView = new google.visualization.DataView(data);
chart.draw(chartView, options);
}

[asgallant]

I made a jsfiddle with your code (http://jsfiddle.net/7kgMY/), and it looks fine to me, so there's no problem there.  Are you drawing in any hidden divs?  If so, you need to make the div's visible before drawing the charts (you can set up an event listener to hide the div's once the chart fires it's 'ready' event - in practice, there is typically no visible flashing of the charts on and off).

[Brian Ouellette]

Your jsfiddle (neat tool by the way) is displaying the same problem on
my end in stock IE8. See image below where the green bar is floating.

http://i.imgur.com/iP0UL.png

No hidden divs on my end. Drawing into empty divs without any specific
styling applied to them. Good to know though as I will want to do that
eventually.

[asgallant]

There's something weird going on with your IE8 then.