I have been working on customizing the vAxis ticks in my Google chart to display multiple colors. Here is the code I currently have:
var gridlines = [
'#ff0000',
'#00ff00',
'#0000ff'
];
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var gridlineIndex = 0;
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect, index) {
if (rect.getAttribute('height') === '1') {
rect.setAttribute('fill', gridlines[gridlineIndex]);
gridlineIndex++;
}
});
});
chart.draw(data, options);
The current result can be seen here.
However, I am aiming for a similar look to this image, with different background colors under the ticks. Can someone please guide me on how to achieve this?
Thank you in advance.