Different colors for annotations in google charts - 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>