Change Color of Stacked Grouped Google Column Chart - google-visualization

Question

Please look at http://jsfiddle.net/v1u1afzn/228/
google.load('visualization', '1.1', {
'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Year', 'A', 'B', 'C', 'D'],
['2001', 321, 600, 816, 319],
['2002', 163, 231, 539, 594],
['2003', 125, 819, 123, 578],
['2004', 197, 536, 613, 298]
]);
var options = {
isStacked: true,
vAxis: {
viewWindow: {
max: 1100,
min: 0
}
},
vAxes: {
0: {
},
1: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
},
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
},
},
colors: ['blue', 'red'],
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
How do I change the faded / lighter blue (first column top stack) to say yellow?
I cannot find a way to change color of individual series that is grouped.
Any ideas?
Thanks in advance.

Answer 1

use the series option to change the color of an individual series / column / stack
series: {
0: {
color: 'yellow'
},
1: {
color: 'green'
},
2: {
color: 'blue',
targetAxisIndex: 1
},
3: {
color: 'red',
targetAxisIndex: 1
}
}
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = new google.visualization.arrayToDataTable([
['Year', 'A', 'B', 'C', 'D'],
['2001', 321, 600, 816, 319],
['2002', 163, 231, 539, 594],
['2003', 125, 819, 123, 578],
['2004', 197, 536, 613, 298]
]);
var options = {
isStacked: true,
vAxis: {
viewWindow: {
max: 1100,
min: 0
}
},
vAxes: {
1: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
},
series: {
0: {
color: 'yellow'
},
1: {
color: 'green'
},
2: {
color: 'blue',
targetAxisIndex: 1
},
3: {
color: 'red',
targetAxisIndex: 1
}
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: jsapi should no longer be used to load the charts library,
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstatic loader.js from now on.
this will only change the load statement, see above snippet...