Google Chart vAxis values are not showing

Question

I am working on various graphs and I am showing multiple graphs in a single page. Somehow vAxis values are not showing on some graphs but it showing in some independent (we can say its in different section and triggered manually) graphs.

I have tried everything that I could have.

var data = google.visualization.arrayToDataTable(window.item);
            let options = {
                width: 1410,
                height: 400,
                legend: {position: 'right'},
                bar: {groupWidth: '75%'},
                isStacked: true,
                vAxis: {
                    minValue: 0,
                    title: 'Count',
                    textStyle: {fontSize: 7}
                }
            };
            chart.draw(data, options);

Answer 1

most likely, the chart's container is hidden when it is drawn.
it should be made visible beforehand.

see following working snippet, which produces the same result.
the chart's container is hidden, then shown on the chart's 'ready' event.
as a result, the vAxis labels are missing.

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    cols: [
      {label: 'x', type: 'string'},
      {label: 'y0', type: 'number'},
      {label: 'y1', type: 'number'},
      {label: 'y2', type: 'number'},
      {label: 'y3', type: 'number'},
    ],
    rows: [
      {c:[{v: 'Column 1'}, {v: 9145.6}, {v: 1000.4}, {v: 0}, {v: 900.4}]},
      {c:[{v: 'Column 2'}, {v: 8123.1}, {v: 0}, {v: 0}, {v: 0}]},
      {c:[{v: 'Column 3'}, {v: 7030.7}, {v: 200.3}, {v: 999.75}, {v: 0}]}
    ]
  });

  var options = {
    width: 1410,
    height: 400,
    legend: {position: 'right'},
    bar: {groupWidth: '75%'},
    isStacked: 'true',
    vAxis: {
      minValue: 0,
      title: 'Count',
      textStyle: {fontSize: 7}
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    container.className = '';
  });
  chart.draw(data, options);
});

.hidden {
  display: none;
  visibility: hidden;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="hidden" id="chart_div"></div>

---

when the container is hidden, the chart cannot properly size or place chart elements.
ensuring the chart is visible before drawing will ensure proper rendering.

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    cols: [
      {label: 'x', type: 'string'},
      {label: 'y0', type: 'number'},
      {label: 'y1', type: 'number'},
      {label: 'y2', type: 'number'},
      {label: 'y3', type: 'number'},
    ],
    rows: [
      {c:[{v: 'Column 1'}, {v: 9145.6}, {v: 1000.4}, {v: 0}, {v: 900.4}]},
      {c:[{v: 'Column 2'}, {v: 8123.1}, {v: 0}, {v: 0}, {v: 0}]},
      {c:[{v: 'Column 3'}, {v: 7030.7}, {v: 200.3}, {v: 999.75}, {v: 0}]}
    ]
  });

  var options = {
    width: 1410,
    height: 400,
    legend: {position: 'right'},
    bar: {groupWidth: '75%'},
    isStacked: 'true',
    vAxis: {
      minValue: 0,
      title: 'Count',
      textStyle: {fontSize: 7}
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="hidden" id="chart_div"></div>

Answer 2

I had the same problem - none of the above helped. Only thing what worked was to change the loading parameter 'current' parameter to specific version '45'

https://github.com/google/google-visualization-issues/issues/2693

Answer 3

add left margin in order to show the yAxis. It worked for me.

chartArea: { width: '100%', left:100 },

Answer 4

Its a bit of a silly setting from Google Prior to version 45 there was no issue as long as you set the width correctly.

eg: 'width':$('.tab-container').width()

Now even when you manually specify the height and width of the chart Google cant calculate it correctly- but it only affects the labels, not the rest of the chart.

Drawing the chart on tab load is a bit of a pain, as another recent change made it more important to use google.charts.setOnLoadCallback() - otherwise some charts will fail to draw in some browsers due Google load timing.

Manually setting to version 45 seems the best solution for legacy charts without re-writing all the code.

Answer 5

The problem for me was that some chartArea options cover the axis labels. Add left (for y-axis) or bottom (for x-axis) padding. Here is an example for y-axis padding:

options = {
    chartArea: {width: "90%", left: "100"},
}
chart.draw(chart_data, options)