Moving Google Chart column annotation position using annotation: line

Question

Using the below example, is it possible to move the annotations so they all appear at the same (static) position at the bottom of the graph when using style: \'line\'

Answer 1

looks like you found an example for moving the annotations,
however in this case, since style: 'line' is being used,
you must adjust both the 'y' attribute, as well as 'rotation'

see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Type', 'Completed', 'Outstanding'],
    ['', 75, 25],
    ['', 50, 40],
    ['', 80, 15]
  ]);

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

  var options = {
    annotations: {
      style: 'line',
      textStyle: {
        fontSize: 8,
        color: 'black',
        strokeSize: 0,
        auraColor: 'transparent'
      },
      alwaysOutside: true,
      stem:{
        color: 'transparent',
      },
    },
    legend: 'none',
    height: 270,
    chartArea: {
      width: '80%',
      height: '80%'
    },
    bar: {
      groupWidth: '80%'
    },
    vAxis: {
      textPosition: 'none',
      gridlines: {
        color: 'transparent'
      }
    },
    series: {
      0: {color: '#00A887'},
      1: {color: '#F6323E'},
    }
  };

  var container = document.getElementById('northPMChart');
  var chart = new google.visualization.ColumnChart(container);

  // move annotations
  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var yLocation = chartLayout.getYLocation(0) + options.annotations.textStyle.fontSize;
    var observer = new MutationObserver(function () {
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
        if ((annotation.getAttribute('text-anchor') === 'middle') &&
            (parseInt(annotation.getAttribute('font-size')) === options.annotations.textStyle.fontSize)) {
          var rotate = 'rotate(270 ' + annotation.getAttribute('x') + ' ' + yLocation + ')';
          annotation.setAttribute('y', yLocation);
          annotation.setAttribute('transform', rotate);
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  chart.draw(view, options);
});

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