Align google Charts annotation with style: line

Question

Hello, I have a problem, I can’t align the Annotation inside the column, and the Annotation should be vertical, follow code:

<div id="grafico_qtd_clientes"></div>

<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Data', {label: 'Quantidade de Clientes', type: 'number'} ],



        ['01/02', 10 ],
        ['02/02', 10 ],
        ['03/02', 10 ],

      ]);

      var formatter = new google.visualization.NumberFormat({
        pattern: ' '
      });
      formatter.format(data, 1);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" }

                        ]);

                   var options = {
                    height: 400,
                    chartArea: { 'width': '95%', 'height': '75%', 'top': '10%' },
                    bar: { groupWidth: '75%' },
                    legend: {position: 'top'},
                    annotations: {
                      <% if intervalDatas > 8 Then %>
                      style: 'line',
                      <% End if %>
                      textStyle: {
                        fontSize: 12,
                      },
                      stem:{
                        color: 'transparent',
                      }
                    },
                    tooltip: {
                      ignoreBounds: 'true',
                      isHtml: true
                    },
                    hAxis: {
                      slantedText: true, slantedTextAngle: 45,
                      textStyle: {
                        fontSize: 12,
                      },
                    },
                    vAxis: {
                        textPosition: 'none',
                        gridlines: {
                            color: 'transparent'
                        }
                    },
                    series: {
                      0: { targetAxisIndex: 0, color: '#1976D2' },
                    }
                  };
  var chart = new google.visualization.ColumnChart(document.getElementById("grafico_qtd_clientes"));
  chart.draw(view, options);
}
</script>

follows graph image, Annotation is not centered inside the column as it should because of 'Stem'

Answer 1

Try to put it like this:

annotations: {
                      <% if intervalDatas > 8 Then %>
                      style: 'point',
                      <% End if %>
                      textStyle: {
                        fontSize: 12,
             },