title: Google Visualization Column and Bar chart vaxis and haxis labels overlap in firefox 3.6.12 and IE
body: <p>Can anyone help me on this problem I am having with chart labels on 
  firefox and IE8, on chrome and safari the labels are working as they 
  are expected to, but on Firefox and IE, the axis labels will overlap 
  each other and won't obey any of the haxis or vaxis options.  I am coding 
  in ruby on rails and using an erb template partial to write out my 
  javascript.  As I said before, it works great on chrome and safari but 
  on firefox and IE8 I run into these axis label problems.  Any help 
  would be grateful. </p>
  
  <p>This is the code I am doing </p>
  
  <pre><code>&lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  google.load('visualization', '1', {'packages':['corechart']});
  
  google.setOnLoadCallback(drawBarChart);
  
  function drawBarChart() {
    var bar_data = new google.visualization.DataTable();
    bar_data.addColumn('string', 'yaxis');
    bar_data.addColumn('number', 'xaxis');
    bar_data.addRows(5);
    var col = 0;
    &lt;% array.each do |value| %&gt;
      bar_data.setValue(col, 0, 'realllly longggggggggggggggggggggggggg');
      bar_data.setValue(col, 1, &lt;%= value %&gt;);
      col++;
    &lt;% end %&gt;
  
  var bar_chart = new google.visualization.BarChart(document.getElementById('&lt;%= element %&gt;'));
  bar_chart.draw(
    bar_data,
    {
      width: 870,
      height: 350,
      title: 'Quantity per Suspect Code',
      legend: 'none',
      vAxis: {
        textStyle: {
          fontSize: 11
        }
      },
      hAxis: {
        title: 'Quantity'
      }
    }
  ) };
  
    &lt;/script&gt;
  </code></pre>
  
  <p>Notes: The element id is passed to this partial, so in this case the element would be 'line_chart' and the id on the template rendering this partial is #line_chart</p>
  
  <p>Thanks</p>