javascript - Moving Google Chart column annotation position

Question

I'm using the below code to produce a column chart with the figures inside the columns, but I'd really like them to be positioned at the bottom of the bars and not the top.

Here's a visual of the chart I have:

    var data = google.visualization.arrayToDataTable([
        ['Type', 'Completed', 'Outstanding'],
        ['Item 1', 75, 25],
        ['Item 2', 50, 40],
        ['Item 3', 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 = {
        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 chart = new google.visualization.ColumnChart(document.getElementById('northPMChart'));

    chart.draw(view, options);

Any help much appreciated.

Answer 1

there are no standard configuration options for moving annotations to the bottom

you can adjust annotations.stem.length to adjust from the default position

but this will move all the annotations the same distance,

which would not work here

---

you can manually move the annotations, as in the following snippet...

however, custom modifications will not be reflected when using getImageURI,
if you need to produce a png image of the chart

also, the chart will move the annotations back to their original location,
anytime there interactivity, such as column hover

so must use a MutationObserver to move them back, when activity occurs...

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Type', 'Completed', 'Outstanding'],
        ['Item 1', 75, 25],
        ['Item 2', 50, 40],
        ['Item 3', 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 = {
        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
    var observer = new MutationObserver(function () {
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
        if ((annotation.getAttribute('text-anchor') === 'middle') &&
            (annotation.getAttribute('fill') === '#ffffff')) {
          var chartLayout = chart.getChartLayoutInterface();
          annotation.setAttribute('y',
            chartLayout.getYLocation(0) - (parseInt(annotation.getAttribute('font-size')) / 2)
          );
        }
      });
    });
    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>