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.

Skimmer

Look for my recent answer. There are many versions of Google Charts and it evolved over the years – Spelaean

Answer 1

Actually you can. Color of the annotations is the same as line color. Just put a dot in the place you want to make an annotation and set a dot's color to the desirable annotation color.

data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role:'annotation'});

and then when you add data

'point { size: 14; shape-type: circle; fill-color: #63A74A','Your annotation'

See example at http://www.marketvolume.com/stocks/stochasticsmomentumindex.asp?s=SPY&t=spdr-s-p-500

Tenpins

Thanks that works, using the example I gave this fiddle shows an orange line with grey annotations - jsfiddle.net/cabbagetreecustard/ggbc00vw/1 – Skimmer

A year on, can you can do this easily using the chart options, annotations.textStyle.color – Bigham

Why isn't there closing } in the string? Even in the jsfiddle. It pokes my eyes out – Spelaean

viktor-ka , @david-yell Similarly how can line color be changed dynamically. My style isn't working. jsfiddle.net/abelkbil/mprxas23 – Sulph

Answer 2

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/

Spelaean

Answer 3

If your annotations are not "touching", ie. the points you'd like to annotate are not next to each other, you could add a second line and add the annotations to that line.

In the JSON example below I have a date and a "total balance", as well as an "Ann" line.

"cols":[
      {
         "id":"date",
         "label":"date",
         "type":"date",
         "p":{
            "role":"domain"
         }
      },
      {
         "id":"total-balance",
         "label":"Total balance",
         "type":"number",
         "p":{
            "role":"data"
         }
      },
      {
         "id":"ann",
         "label":"Ann",
         "type":"number",
         "p":{
            "role":"data"
         }
      },
      {
         "type":"string",
         "p":{
            "role":"annotation"
         }
      },
      {
         "type":"string",
         "p":{
            "role":"annotationText"
         }
      }
   ],

The annotation comes after the "Ann" column so it'll be added to the "Ann" data points.

In my JSON, the date and "total-balance" are always filled in. "Ann" and the annotations are usually empty:

  "rows":[
  {
     "c":[
        {
           "v":"Date(2013, 0, 1)"
        },
        {
           "v":1000
        },
        {
           "v":null
        },
        {
           "v":null
        },
        {
           "v":null
        }
     ]
  },
  {
     "c":[
        {
           "v":"Date(2013, 0, 8)"
        },
        {
           "v":1001
        },
        {
           "v":null
        },
        {
           "v":null
        },
        {
           "v":null
        }
     ]
  },

When I need an annotation, the "Ann" cell gets the same value as the total balance, and the annotation is added:

{
     "c":[
        {
           "v":"Date(2013, 1, 26)"
        },
        {
           "v":2000
        },
        {
           "v":2000
        },
        {
           "v":"Something!"
        },
        {
           "v":"Something happened here!"
        }
     ]
  },

In your GChart's configuration, you can now set two colours. One for the normal line, and one for the "Ann".

colors: ['black','red']

If you have no annotations "touching", GCharts will not draw a line between them and the points will remain "invisible", while the annotations show up at exactly the right place.

Papandreou

Answer 4

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.

Dempster

Answer 5

Has this been updated using the 'style' option where one could add a new column {"type":"string","role":"style"} and in each row we would have {"v":"point {size: 4; fill-color: #3366cc;}"}? This allows the annotation to have the same color as the point/marker (which could be changed for each point) but does not allow it to be bold. One example of the data to try would be,

var data =new google.visualization.DataTable(
{
"cols":[
{"label":"Log GDP Per-Capita ","type":"number"},
{"label":"New Chart",
"type":"number"},
{"type":"string","role":"annotation"},
{"type":"string","role":"style"}
],
"rows":[
{"c":[{"v":10.21932},{"v":12.3199676},{"v":"ABW"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":10.68416},{"v":8.4347518},{"v":"ARE"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":9.634226},{"v":12.0774068},{"v":"ATG"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":10.83869},{"v":1.8545959},{"v":"AUS"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":10.7687},{"v":7.4919999},{"v":"AUT"},{"v":"point {size: 4; fill-color: #3366cc;}"}]}
]
}
);

Sutra