How can you force Google Charts vAxes render?

Question

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 ti

Answer 1

you can use the chartArea config code to ensure there is enough room on either side of the chart.

by default, the chart will follow the size of the container,
but it does not entirely fill the container.

I like to use the chartArea option,
to stretch the chart to the height and width of the container,
and leave room on the edges for the axes and legend, etc...

chartArea: {
  top: 32,         // leave room on top for legend
  left: 60,        // for axis index 0
  right: 60,       // for axis index 1
  bottom: 32,      // for x-axis
  height: '100%',  // stretch height
  width: '100%',   // stretch width
},
height: '100%',    // ensure fills height of container
width: '100%',     // fills width of container

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({"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}]}]});

  var options = {
    chartArea: {
      top: 32,         // leave room on top for legend
      left: 60,        // for axis index 0
      right: 60,       // for axis index 1
      bottom: 32,      // for x-axis
      height: '100%',  // stretch height
      width: '100%',   // stretch width
    },
    height: '100%',    // ensure fills height of container
    width: '100%',     // fills width of container

    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},
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart_div1 {
  height: 100%;
}