How can I dynamically add either a full length gridline or annotation line in my google chart?

Question

I'm a bit newer to google charting library. I'm trying to have either a full length gridline or annotation line that stretches the entire height of my chart for a selected h axis point.

I've been able to successfully add an annotation line at the position I want but it's a very small line that takes up a fraction of the full height of the chart. Looking at examples, people have been able to achieve having a full length annotation line by designating the max value in data.addRow such as:

data.addColumn('string', 'x');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');`

and setting the row (8 is the max value of the charts height)

data.addRow(["G", 'Foo', 'Foo annotation', 8, 1, 0.5]);

However, I'm adding rows dynamically using jQuery .each and an array of points so I don't know what the max height of my chart will be. The max height will also vary widely in different instances of my site so I cannot set the max value to a specific number.

Here is my current chart (with the short annotation line):

And here is what I would like my chart to look like:

Here is my code for the chart:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});

  function drawChartSponsorship(task_plots, annotation_array) { 
    console.log("draw sponsorships function");
    var objectives = JSON.parse(task_plots);
    var annotation_array = JSON.parse(annotation_array);
    console.log(annotation_array);
    
    
    var data = new google.visualization.DataTable();
    
    data.addColumn('string', 'Date');
    data.addColumn ('number','Reach');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn({type: 'string', role: 'annotationText'});
    data.addColumn({type: 'string', role: 'tooltip' })

    var tick_points= [];
    $.each (objectives, function(key,value){
        $.each (value, function(key,valp){        
        //var time = String()
        var objective_array_date = key;
        var annotation_value = 0;
 
        var annotation_check = checkAnnotation( annotation_array, objective_array_date );    
        console.log("here is your variable declaration of annotation_check " + "key: " + objective_array_date + "and response" + annotation_check);
        
            //console.log (annotation_value);
            if ( annotation_check == 'not_available' ){
                data.addRow([String(objective_array_date), valp, null]);
                console.log ("annotation_value was not available");
            }else {
                data.addRow([String(objective_array_date), valp, "Upload", "Upload", annotation_check]);
                tick_points.push(String(objective_array_date));
            }
        //data.addRow('number', value);
        });
    });
    //var other_max= data.getColumnRange(1).max);
    //console.log(other_max);
    //var max_value= data.getOption('vAxis.viewWindow.min');
    //console.log(max_value);
    
    var header = 'Subscriber Growth';
    var Title = ('Subscriber Growth');
    //console.log(Testarray);
    //var data = google.visualization.arrayToDataTable(Testarray, false);
 
    var options = {
      title: header,
      titleTextStyle: {
          color: '#FFF',
          fontSize: '18',
          bold:true
      },
        annotations: {
            style: 'line'
        },      
      curveType: 'function',
      backgroundColor: '#404040',
  
      hAxis: {
          maxTextLines: 1,
          minTextSpacing: 40,
          //format: 'short',
          type: 'string',
          ticks: tick_points,
          textStyle:{color: '#FFF',
              fontSize: '12',
              bold: true
          },
          
         maxAlternation: 1,

         slantedText:false,
 
      },
      vAxis:{
          textStyle:{color: '#FFF',
              fontSize: '15'
          },
          gridlines: {count: 4},
          format: 'short'
      },
      colors: ['#00cc99'],
      height: '350',
      width: '550',
      chartArea: {'width': '70%','height': '60%', 'right' : 10, 'left': 55, 'bottom': 40 },
      legend: { position: 'bottom',
                textStyle: {color: '#FFF'}
      },
      series: {
          0: { color: '#00cc99' },
          1: { color: '#007AFF' }
      }      
    };

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

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

Answer 1

if you load the annotation, directly after the first data table column (x-axis),
it will rise the height of the chart by default...

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn('number','Reach');
  data.addRows([
    ['2018-03-12', 'Upload', 5],
    ['2018-03-13', 'Upload', 10],
    ['2018-03-14', 'Upload', 15]
  ]);

    var options = {
      title: 'test',
      titleTextStyle: {
          color: '#FFF',
          fontSize: '18',
          bold:true
      },
        annotations: {
            style: 'line',
            stem: {
              color: 'magenta'
            }
        },
      curveType: 'function',
      backgroundColor: '#404040',

      hAxis: {
          maxTextLines: 1,
          minTextSpacing: 40,
          //format: 'short',
          type: 'string',
          //ticks: tick_points,
          textStyle:{color: '#FFF',
              fontSize: '12',
              bold: true
          },

         maxAlternation: 1,

         slantedText:false,

      },
      vAxis:{
          textStyle:{color: '#FFF',
              fontSize: '15'
          },
          gridlines: {count: 4},
          format: 'short'
      },
      colors: ['#00cc99'],
      height: '350',
      width: '550',
      chartArea: {'width': '70%','height': '60%', 'right' : 10, 'left': 55, 'bottom': 40 },
      legend: { position: 'bottom',
                textStyle: {color: '#FFF'}
      },
      series: {
          0: { color: '#00cc99' },
          1: { color: '#007AFF' }
      }
    };

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

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