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

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.