How to change color of annotation text in google-charts

Question

How do you change the color of an annotation text in Google Chart Tools LineChart ?

Here is an example

google.load(\'visualization\', \'1\', {package         


        

Answer 1

Short answer: no, you can't change the text color through standard options (you could write something to find that text in the SVG and change its color with javascript, but that is beyond my level).

You can see an answer from ASGallant on Google Groups here, and his example here.

// code borrowed from Google visualization API playground, slightly modified here

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
    // 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", 'foo', 'foo text', 7, 1, 0.5]);
    data.addRow(["F", null, null, 7, 0.5, 1]);
    data.addRow(["G", null, null, 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", null, null, 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]);

    // Create and draw the visualization.
    var chart = new google.visualization.LineChart(document.getElementById('visualization'));
    chart.draw(data, {
        annotation: {
            1: {
                style: 'line'
            }
        },
        curveType: "function",
        width: 500,
        height: 400,
        vAxis: {
            maxValue: 10
        }
    });
}

The best you can do is to change the style of the line, but it doesn't look like you can currently change the color of the line.