Align annotation text on Google Chart

Question

I am trying to nudge my annotation text to the top of my line chart rather than middle. The annotations that I want to shift are associated with the x-axis data so appear rotated on a vertical line so it would seem like all I need to do is align the text to the right.

I am aware of the annotations.textStyle configuration option but there are no examples of aligment changes shown in the documentation and I've been trying out some options that I thought would work but nothing shifts it from the centre.

For example in this Fiddler I thought textStyle: {align: 'right'} would work but it has no impact - the annotation 'boost' is still showing in the centre rather than at the top.

Answer 1

there are no options available to adjust the alignment,
but you can manually modify the chart's svg,
when the chart's 'ready' event fires...

here, I find the annotation <text> element and adjust the x coordinate (due to the transformation)

google.charts.load('current', {
  packages: ['corechart']
}).then(drawVisualization);

function drawVisualization() {
    // example copied from Google Visualization API playground,
    // modified for category axis annotations

    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    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');
    data.addRow(["A", null, null, 1, 1, 0.5]);
    data.addRow(["B", null, null, 2, 0.5, 1]);
    data.addRow(["C", null, null, 4, 1, 0.5]);
    data.addRow(["D", null, null, 8, 0.5, 1]);
    data.addRow(["E", null, null, 7, 1, 0.5]);
    data.addRow(["F", null, null, 7, 0.5, 1]);
    data.addRow(["G", 'boost', 'Foo annotation', 8, 1, 0.5]);
    data.addRow(["H", null, null, 4, 0.5, 1]);
    data.addRow(["I", null, null, 2, 1, 0.5]);
    data.addRow(["J", null, null, 3.5, 0.5, 1]);
    data.addRow(["K", ' ', 'Bar annotation', 3, 1, 0.5]);
    data.addRow(["L", null, null, 3.5, 0.5, 1]);
    data.addRow(["M", null, null, 1, 1, 0.5]);
    data.addRow(["N", null, null, 1, 0.5, 1]);

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

    google.visualization.events.addListener(chart, 'ready', function () {
      var labels = chart.getContainer().getElementsByTagName('text');
      Array.prototype.forEach.call(labels, function(label) {
        if ((label.getAttribute('text-anchor') === 'middle') && (label.hasAttribute('transform'))) {
          label.setAttribute('x', parseFloat(label.getAttribute('x')) + 100);
        }
      });
    });

    chart.draw(data, {
        curveType: 'function',
        width: 500,
        height: 400,
        vAxis: {
            maxValue: 10
        },
        annotations: {
            style: 'line',
        }
    });
}

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

note: the jsapi loader is an old version, use loader.js instead, see above...