Search code examples
google-visualization

How to change color of annotation text in google-charts


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.


Solution

  • 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