Google Charts - Labels Are Not Showing

Google Chart vAxis values are not showing

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>

Google Linechart not showing y-axis labels or legend labels inside of a Google Map InfoWindow

As stated in the comments. It was a result of me drawing the chart while it's container is hidden. Fortunately, there is a domready event. Changing my function to listen for the even then call chart.draw() fixed it.

infoWindow.setContent(infoWindowNode);
infoWindow.open(marker.getMap(), marker);

google.maps.event.addListener(infoWindow, 'domready', function () {
    chart.draw(data, options);
});

Labels on google charts are not visible in specific coonfiguration

material charts do not support columns roles, such as 'annotation',

along with several other options

and, it's not possible to have multiple stacks per label in classic charts

as such, we can use a material chart,

and add our own annotations manually,

on the chart's 'ready' event

see following working snippet...

google.charts.load('current', {  packages:['bar']}).then(function () {  var data = google.visualization.arrayToDataTable([    [      {label: 'Year', id: 'year', type: 'number'},      {label: 'Sales', id: 'Sales', type: 'number'},      {label: 'Expenses', id: 'Expenses', type: 'number'},      {role: 'annotation', type: 'string'}    ],    [2014, 10, 400, 'label1'],    [2014, 800, 100, 'label2'],    [2015, 200, 460, 'label3'],    [2015, 110, 660, 'label4'],    [2016, 100, 300, 'label5'],    [2016, 600, 120, 'label6'],    [2017, 360, 540, 'label7'],    [2017, 300, 500, 'label8']  ]);
  var options = {    chart: {      title: 'Sales and Expenses',      subtitle: 'Some descr',    },    bars: 'horizontal',    height: 400,    isStacked: true,    vAxis: {      format: '0'    }  };
  var container = document.getElementById('chart_div');  var chart = new google.charts.Bar(container);
  // add annotations  google.visualization.events.addListener(chart, 'ready', function () {    var annotation;    var bars;    var copyLabel;    var coordsBar;    var coordsLabel;    var labels;    var svg;
    // get svg    svg = container.getElementsByTagName('svg')[0];
    // find label to clone    labels = svg.getElementsByTagName('text');    Array.prototype.forEach.call(labels, function(label) {      if (label.textContent === data.getValue(0, 0).toString()) {        copyLabel = label;      }    });
    // find top bars, add labels    bars = svg.getElementsByTagName('path');    Array.prototype.forEach.call(bars, function(bar, index) {      coordsBar = bar.getBBox();      annotation = copyLabel.parentNode.insertBefore(copyLabel.cloneNode(true), copyLabel);      coordsLabel = annotation.getBBox();      annotation.textContent = data.getValue(index, 3);      annotation.setAttribute('fill', '#000000');      annotation.setAttribute('x', coordsBar.x + coordsBar.width - 16);      annotation.setAttribute('y', coordsBar.y + coordsBar.height - (coordsLabel.height / 2));      annotation.style.zIndex = -1;    });  });
  chart.draw(data, google.charts.Bar.convertOptions(options));});

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

Google line chart h-Axis labels disappearing as chart is drawing

try using the following option to increase the space at the bottom of the chart.

chartArea: {
  bottom: 80
},

this should allow the labels to print on two lines...

Vertical axis labels not appearing on first load of google charts

The problem was generating the graph before making the container visible switching the order from

                    //Function that draws google visualisation
                    load_page_data(response.Message);
                    $('#listed_v_sold_graph_div').css("display", "block");

                    $('#listed_v_sold_graph_div').css("display", "block");
                    //Function that draws google visualisation
                    load_page_data(response.Message);

, see https://stackoverflow.com/a/54944593/5090771