Google visualization line chart missing Y axis

Question

I am new to javascript and the Google Visualization library. I've created a line chart as below 1, but cannot get the Y Axis to display anything; I'm looking for the axis itself to be drawn, along with the values from the Data Table.

Here's my code (the chart labels are changed from the screenshot, but nothing more):

google.setOnLoadCallback(drawLineChart);
function drawLineChart(){var data=google.visualization.arrayToDataTable(
    [
        [
            'Day',
            'Label 1','Label 2','Label 3','Label 4','Label 5',
            'Label 6','Label 7','Label 8','Label 9','Label 10',
        ],
        ['19 Aug 2013',1,0,0,0,0,0],
        ['20 Aug 2013',2,2,2,0,0,0],
        ['21 Aug 2013',5,5,0,6,5,0],
        ['22 Aug 2013',1,4,3,2,0,0],
        ['23 Aug 2013',0,0,0,4,0,0],
        ['24 Aug 2013',3,2,1,2,0,15],
        ['25 Aug 2013',1,2,1,2,0,0],
        ['26 Aug 2013',3,1,2,1,0,0],
        ['27 Aug 2013',0,0,3,2,0,1]
    ]);

    var options = {
        title:'Title',
        legend:{position:'bottom'},
        curveType:'none',
        interpolateNulls:true,
        chartArea:{left:0,top:10,width:"100%"}
    };

    var chart=new google.visualization.LineChart(document.getElementById('visits_by_day1'));chart.draw(data,options);}

Answer 1

I have similar issue. But, in my case, I am NOT using chartArea option at all. Hence, I doubt @asgallant's explanation is correct.

The following is my code:

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = new google.visualization.DataTable();
    // Declare columns
    data.addColumn('date', 'Date');
    data.addColumn('number', 'MM8');
    data.addColumn('number', 'S&P');
    
    data.addRows([[new Date('01/03/2017'),98517.96,100278.03],[new Date('01/10/2017'),99606.27,100769.69],[new Date('01/17/2017'),97409.55,100724.83],[new Date('01/24/2017'),101596.78,101265.78],[new Date('01/31/2017'),103283.59,101212.49],[new Date('02/07/2017'),106136.74,101843.6],[new Date('02/14/2017'),102568.42,103820.0],[new Date('02/21/2017'),102253.38,105054.7],[new Date('02/28/2017'),98587.77,104977.42],[new Date('03/07/2017'),97623.69,105188.38],[new Date('03/14/2017'),99571.71,105057.8],[new Date('03/21/2017'),98026.27,104106.02],[new Date('03/28/2017'),100641.93,104752.24],[new Date('04/04/2017'),98556.17,104822.86],[new Date('04/11/2017'),99200.09,104539.5],[new Date('04/18/2017'),98695.49,104024.75],[new Date('04/25/2017'),102622.71,106086.42],[new Date('05/02/2017'),100472.95,106200.12],[new Date('05/09/2017'),98574.4,106455.5],[new Date('05/16/2017'),106159.07,106622.05],[new Date('05/23/2017'),104296.55,106522.12],[new Date('05/30/2017'),105035.88,107165.67],[new Date('06/06/2017'),107811.48,107894.94],[new Date('06/13/2017'),110670.8,108384.37],[new Date('06/20/2017'),110152.66,108236.92],[new Date('06/27/2017'),109044.62,107453.02],[new Date('07/03/2017'),108633.82,107880.72],[new Date('07/11/2017'),111239.13,107726.16],[new Date('07/18/2017'),113238.32,109284.19],[new Date('07/25/2017'),114516.89,110017.9],[new Date('08/01/2017'),114235.76,109983.26],[new Date('08/08/2017'),118583.33,109919.74],[new Date('08/15/2017'),117029.48,109461.84],[new Date('08/22/2017'),115461.52,108924.44],[new Date('08/29/2017'),113553.88,108648.63],[new Date('09/05/2017'),112772.29,109161.61],[new Date('09/12/2017'),113241.54,110877.3],[new Date('09/19/2017'),116056.94,111328.98],[new Date('09/26/2017'),114991.2,110893.29],[new Date('10/03/2017'),119650.15,112569.45],[new Date('10/10/2017'),119326.16,113282.73],[new Date('10/17/2017'),124032.6,113670.02],[new Date('10/24/2017'),125599.48,114103.94],[new Date('10/31/2017'),126408.48,114376.19],[new Date('11/07/2017'),126213.65,115059.27],[new Date('11/14/2017'),128414.88,114536.52],[new Date('11/21/2017'),132050.66,115431.9],[new Date('11/28/2017'),133242.73,116675.92],[new Date('12/05/2017'),130042.14,116788.29],[new Date('12/12/2017'),130220.51,118322.33],[new Date('12/19/2017'),133182.72,119093.34],[new Date('12/26/2017'),133313.89,119050.26],[new Date('01/02/2018'),133892.53,119730.23]
    ]);

    var options = {
      title: 'Portfolio Performance Comparison',
      curveType: 'function',
      legend: { position: 'bottom' },
      hAxis: {
        format: 'M/d/yy'
        }
     };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
  }
</script>

resulted graph

Answer 2

An alternative answer that keeps the chartArea.width option at 100%: set the vAxis.textPosition option to "in", which will draw the labels inside the chartArea:

var options = {
    title:'Title',
    legend:{position:'bottom'},
    curveType:'none',
    interpolateNulls:true,
    chartArea:{left:0,top:10,width:"100%"},
    vAxis:{textPosition: 'in'}
};

That will give you the axis labels just inside the edge of the chartArea

Answer 3

A couple of things:

1. You have extra labels you don't need. Your code, as written won't work at all. Strip the number of labels down to the number of columns you have.
2. Adding strings, and hoping they're interpreted as dates doesn't work well. Make it explicit.
3. Your chart area also excluded the vAxis labels.

Try the following:

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Day');
  data.addColumn('number', 'Label 1');
  data.addColumn('number', 'Label 2');
  data.addColumn('number', 'Label 3');
  data.addColumn('number', 'Label 4');
  data.addColumn('number', 'Label 5');
  data.addColumn('number', 'Label 6');
  data.addRows([
        [new Date('19 Aug 2013'),1,0,0,0,0,0],
        [new Date('20 Aug 2013'),2,2,2,0,0,0],
        [new Date('21 Aug 2013'),5,5,0,6,5,0],
        [new Date('22 Aug 2013'),1,4,3,2,0,0],
        [new Date('23 Aug 2013'),0,0,0,4,0,0],
        [new Date('24 Aug 2013'),3,2,1,2,0,15],
        [new Date('25 Aug 2013'),1,2,1,2,0,0],
        [new Date('26 Aug 2013'),3,1,2,1,0,0],
        [new Date('27 Aug 2013'),0,0,3,2,0,1]
    ]);

  var options = {
      title:'Title',
      legend:{position:'bottom'},
      curveType:'none',
      interpolateNulls:true,
      //chartArea:{left:0,top:10,width:"100%"}
  };

  var chart=new google.visualization.LineChart(document.getElementById('visits_by_day1'));
  chart.draw(data,options);
}
​