Google Scatter Chart does not display Y axis labels

Question

I want to display some Data with googles Scatter Chart. No matter how I try I can't get the y axis labels to show.

I tried various things, which were suggested here and on other forums. Including: Resizing the chart, resizing the label font, Rescaling the axis and changing the textPosition of the vAxis. None of this worked.

The funny thing is that the ticks I defined are showing correctly placed gridlines. It is just the labels that are missing. The axis title is also displayed which leads me to the conclusion that spacing is not an issue. The code looks like this:

function  getLineChartOptions(target,leaflayer,curretnStartDate,currentEndDate) {

    var ymin = 0;
    var ymax = 100;
    var yticks = [];
    if (target == "BBCH (BBCH)"){
        yAxisTitle = "BBCH";
        yticks = [0, 20, 40, 60, 80, 100];
    }
    else{
        yAxisTitle = target +" "+leaflayer+" severity";
        yticks = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
    }
    var mo={
        title: yAxisTitle,
        width: 800,
        height: 400,
        vAxis: {
            viewWindow: {
                    min: ymin,
                    max: ymax
                },
            ticks: yticks,
            title: yAxisTitle,
            labels: yticks,
            textStyle : { fontSize: 10} 
        },
        hAxis: {
            viewWindow: {
                    min: curretnStartDate,
                    max: currentEndDate
                },
            gridlines: {
                count: 6,
            }
        },
        tooltip: {isHtml: true, trigger: 'selection'},
        legend: {position: 'none'},
        colorAxis: {colors: ['green','yellow', 'red']},
        focusTarget: 'category'
    };
    return mo

var materialOptions = getLineChartOptions(target,leaflayer,curretnStartPickedDate,enddatePickedDate);
var node        = document.createElement('div');
var infoWindow  = new google.maps.InfoWindow();
var chart       = new google.visualization.ScatterChart(node);
            chart.draw(Data, materialOptions);

WhiteHat WhiteHat · Accepted Answer · 2019-06-06T17:51:15

the chart's container element needs to be added to the document before drawing the chart.
otherwise, the chart cannot properly calculate sizing and placement.

var node = document.createElement('div');  // <-- new element, not added to the document yet
var chart = new google.visualization.ScatterChart(node);
chart.draw(data, options);

see following working snippet,
in similar fashion, the chart is drawn in a newly created element,
which is later added to the document.
notice how the y-axis labels are missing, and the x-axis labels partially overlap.

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var oneDay = (24 * 60 * 60 * 1000);
  var currentEndDate = new Date();
  var currentStartDate = new Date(currentEndDate.getTime() - (oneDay * 365.25));
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Y');
  for (var i = currentStartDate.getTime(); i <= currentEndDate.getTime(); i = i + oneDay) {
    var direction = (i % 2 === 0) ? 1 : -1;
    var rowDate = new Date(i);
    data.addRow([rowDate, rowDate.getMonth() + (rowDate.getDate() * direction)]);
  }

  var options = {
    title: 'test chart',
    width: 800,
    height: 400,
    vAxis: {
      viewWindow: {
        min: 0,
        max: 100
      },
      ticks: [0, 20, 40, 60, 80, 100],
      title: 'test y-axis',
      textStyle : {fontSize: 10}
    },
    hAxis: {
      viewWindow: {
        min: currentStartDate,
        max: currentEndDate
      },
      gridlines: {
        count: 6,
      }
    },
    tooltip: {isHtml: true, trigger: 'selection'},
    legend: {position: 'none'},
    focusTarget: 'category'
  };

  var container = document.getElementById('chart');
  var node = document.createElement('div');
  var chart = new google.visualization.ScatterChart(node);
  chart.draw(data, options);

  container.appendChild(node);
});

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

if we first add the container element to the document,
then the chart is drawn properly.

var container = document.getElementById('chart');
var node = container.appendChild(document.createElement('div'));
var chart = new google.visualization.ScatterChart(node);
chart.draw(data, options);

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var oneDay = (24 * 60 * 60 * 1000);
  var currentEndDate = new Date();
  var currentStartDate = new Date(currentEndDate.getTime() - (oneDay * 365.25));
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Y');
  for (var i = currentStartDate.getTime(); i <= currentEndDate.getTime(); i = i + oneDay) {
    var direction = (i % 2 === 0) ? 1 : -1;
    var rowDate = new Date(i);
    data.addRow([rowDate, rowDate.getMonth() + (rowDate.getDate() * direction)]);
  }

  var options = {
    title: 'test chart',
    width: 800,
    height: 400,
    vAxis: {
      viewWindow: {
        min: 0,
        max: 100
      },
      ticks: [0, 20, 40, 60, 80, 100],
      title: 'test y-axis',
      textStyle : {fontSize: 10}
    },
    hAxis: {
      viewWindow: {
        min: currentStartDate,
        max: currentEndDate
      },
      gridlines: {
        count: 6,
      }
    },
    tooltip: {isHtml: true, trigger: 'selection'},
    legend: {position: 'none'},
    focusTarget: 'category'
  };

  var container = document.getElementById('chart');
  var node = container.appendChild(document.createElement('div'));
  var chart = new google.visualization.ScatterChart(node);
  chart.draw(data, options);
});

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

Google Scatter Chart does not display Y axis labels

1 Answers