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

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

Answer 2

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;}"}]}
]
}
);

Answer 3

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.

Answer 4

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.

Answer 5

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
                    }
                  }
                };