Different colors for annotations in google charts

Question

I have two types of annotations, one has links and other doesn't. I want to color them both in different colors. Is it possible?

type 1 is -
{ v: 'sample', Link: 'some link }

type 2 is -

{ v: 'sample', }

I want to color type1 in some color and type2 in other, is it possible ?

Answer 1

you can style the annotations for the overall chart,
or for each series individually

see following working snippet,
the fontSize is set to 10 for all annotations
then the colors are changed for the individual series

google.charts.load('current', {
  callback: drawStacked,
  packages: ['corechart']
});

function drawStacked() {
  var data = new google.visualization.arrayToDataTable([
    ['Month', 'A', {role: 'annotation'}, 'B', {role: 'annotation'}],
    ['Aug', 3754, '3,754', 2089, '2,089'],
    ['Sept', 900, '900', 200, '200'],
    ['Oct', 2000, '2,000', 4900, '4,900'],
    ['Nov', 1700, '1,700', 2200, '2,200'],
    ['Dec', 2400, '2,400', 2089, '2,089']
  ]);

  var options = {
    annotations: {
      textStyle: {
        fontSize: 10
      }
    },
    series: {
      0: {
        annotations: {
          stem: {
            color: 'cyan',
            length: 5
          },
          textStyle: {
            color: 'cyan'
          }
        }
      },
      1: {
        annotations: {
          stem: {
            color: 'magenta',
            length: 10
          },
          textStyle: {
            color: 'magenta'
          }
        }
      }
    }
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

EDIT

to have different colors for annotations in a single series,
need to change color manually when the 'ready' event fires

see following working snippet...

google.charts.load('current', {
  callback: drawStacked,
  packages: ['corechart']
});

function drawStacked() {
  var data = new google.visualization.arrayToDataTable([
    ['Month', 'A', {role: 'annotation'}],
    ['Aug', 3754, '3,754'],
    ['Sept', {v: 900, p: {link: 'type A'}}, '900'],
    ['Oct', {v: 2000, p: {link: 'type B'}}, '2,000'],
    ['Nov', 1700, '1,700'],
    ['Dec', 2400, '2,400']
  ]);

  var options = {
    annotations: {
      textStyle: {
        color: '#000000',
        fontSize: 10
      }
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
      for (var i = 0; i < data.getNumberOfRows(); i++) {
        if ((text.getAttribute('text-anchor') === 'middle') && (text.innerHTML === data.getFormattedValue(i, 1))) {
          switch (data.getProperty(i, 1, 'link')) {
            case 'type A':
              text.setAttribute('fill', 'magenta');
              break;

            case 'type B':
              text.setAttribute('fill', 'cyan');
              break;
          }
        }
      }
    });
  });

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>