title: How can you force Google Charts vAxes render?
body: <p>Currently I have two graphs I'm rendering on a page, I'm using google's visualization Charts lib and due to page sizing issues the vAxes refuses to render some/most of the time. </p>
  
  <p>If I give it enough space, it will render the axes fine, but if it's even slightly off, even when there's plenty of space for these bloody axes, they just refuse to render, I can't have that!</p>
  
  <p>I looked into it and it seems to be rendering bunch of  tags when it works and doesn't render when it doesn't work, which makes me think there ought to be some bull if-else "AI" that actively chooses to sabotage me! FS!</p>
  
  <p>Has anyone had experience with Charts and managed to find a workaround on forcing the lib to render the vAxes regardless of what google "AI" wills? (Seriously, what happened to second law of robotics?! OBEY ME, SCUM!)</p>
  
  <p>Sorry, I'm a bit irked atm.</p>
  
  <p>Edit: Sorry, to provide the details, here's the js block rendering the charts:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  // Load the Visualization API and the chart package.
  google.charts.load('visualization', {'packages':['corechart']});
  
  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);
  
  function drawChart() {
  
  
   var options = {
        hAxis: {showTextEvery: 5},
        vAxes: {  
                  0: {textPosition: 'out',
                      viewWindowMode:'pretty',
                      viewWindow: {min:0},                        
                      gridlines: {color: 'transparent'},
                    },
                1: {  textPosition: 'out',
                      viewWindow: {min:0},
                      gridlines: {color: 'transparent'}
                    },
  
                },
                seriesType: 'bars',
                   series: {0: {targetAxisIndex:0, type: 'line'},
                 1:{targetAxisIndex:1},
                 2:{targetAxisIndex:1},
             }
      };
  
  //Chart render
    var data1 = new google.visualization.DataTable(&lt;?=$jsonEventType?&gt;);
  
    var chart1 = new google.visualization.ComboChart(document.getElementById('chart_div1'));
      chart1.draw(data1, options);
  
  
  
  }
  </code></pre>
  
  <p>div element:&lt; div id="chart_div1" style=" height: 100%;"> (it's within multiple other divs, but that's besides the point) </p>
  
  <p>As you can tell it's a basic c-c-c-combo chart, the $jsonEventType doesn't matter i think but here it is:</p>
  
  <p>string(661) "{"cols":[{"label":"Date","type":"string"},{"label":"To Audit","type":"number"},{"label":"Open","type":"number"},{"label":"Closed","type":"number"}],"rows":[{"c":[{"v":"05/07/2018"},{"v":437},{"v":0},{"v":8}]},{"c":[{"v":"12/07/2018"},{"v":419},{"v":0},{"v":21}]},{"c":[{"v":"19/07/2018"},{"v":401},{"v":56},{"v":36}]},{"c":[{"v":"26/07/2018"},{"v":385},{"v":0},{"v":20}]},{"c":[{"v":"02/08/2018"},{"v":369},{"v":0},{"v":12}]},{"c":[{"v":"09/08/2018"},{"v":357},{"v":0},{"v":25}]},{"c":[{"v":"16/08/2018"},{"v":348},{"v":0},{"v":18}]},{"c":[{"v":"23/08/2018"},{"v":336},{"v":0},{"v":14}]},{"c":[{"v":"30/08/2018"},{"v":316},{"v":0},{"v":13}]}]}" </p>