CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Sooraj N Raju
Sooraj N Raju

Reputation: 632

Google Chart vAxis values are not showing

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);

enter image description here

Upvotes: 4

Views: 7466

Answers (5)

Zags
Zags

Reputation: 41338

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)

Upvotes: 1

Paul Feely
Paul Feely

Reputation: 1

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.

Upvotes: 0

RobertP
RobertP

Reputation: 21

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

Upvotes: 2

Adrian Berca
Adrian Berca

Reputation: 299

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

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

Upvotes: 0

WhiteHat
WhiteHat

Reputation: 61275

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>

Upvotes: 10

Related Questions