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', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();      
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Sales');
    data.addColumn({id: 'title', label: 'Title', type: 'string', role: 'annotation'});
    data.addRows([
        [new Date(2012, 3, 5), 80, null],
        [new Date(2012, 3, 12), 120, 'New Product'],
        [new Date(2012, 3, 19), 80, null],
        [new Date(2012, 3, 26), 65, null],
        [new Date(2012, 4, 2), 70, null],
    ]);

    var options = {
        title: 'Sales by Week',
        displayAnnotations: true,
        hAxis: {title: 'Date', 
                titleTextStyle: {color: 'grey'}},
        colors: ['#f07f09']
      };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);      
}

I want the line to be orange and the annotation text in grey. Currently the annotation text is orange.

Answer 1

No need for extra style data column and plumbing code to fill it for every row with ugly (and even incomplete above) formatting string. Only resort to separate styling column if you want to have different annotation color for the different data points.

There's a global setting, search for annotations.textStyle in https://developers.google.com/chart/interactive/docs/gallery/linechart

var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

Here is a concept code for your case (notice different initialization google.charts, very important):

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

google.charts.load('current', { 'packages': ['corechart', 'line', 'bar'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();      
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sales');
  data.addColumn({id: 'title', label: 'Title', type: 'string', role: 'annotation'});
  data.addRows([
    [new Date(2012, 3, 5), 80, null],
    [new Date(2012, 3, 12), 120, 'New Product'],
    [new Date(2012, 3, 19), 80, null],
    [new Date(2012, 3, 26), 65, null],
    [new Date(2012, 4, 2), 70, null],
  ]);

  var options = {
    chart: {
      title: 'Sales by Week'
    },
    hAxis: {
      title: 'Date', 
      titleTextStyle: {color: 'grey'}
    },
    annotations: {
      textStyle: {
        color: 'grey',
      }
    }
    colors: ['#f07f09']
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);      

}

You can also change other text formatting of the annotation, like bold, italic, font type, etc. Here is an example where most of the text is configured to be bold:

                var options = {
                  chart: {
                   title: title
                  },
                  hAxis: {
                    textStyle: {
                      bold: true
                    }
                  },
                  vAxis: {
                    format: 'decimal',
                    textStyle: {
                      bold: true
                    }
                  },
                  legendTextStyle: {
                    bold: true
                  },
                  titleTextStyle: {
                    bold: true
                  },
                  width: chart_width,
                  //theme: 'material',  // material theme decreases the color contrast and sets the black color items (all text) to 171,171,171 grey -> washed out
                  annotations: {
                    alwaysOutside: true,
                    highContrast: true,  // default is true, but be sure
                    textStyle: {
                      bold: true
                    }
                  }
                };

More examples with source repo link: https://mrcsabatoth.github.io/GoogleChartsTalk/