google charts vAxis ticks multiple colors with respective light background

user_7498614 0
Viewed 241

This is my code of google chart vAxis ticks multiple colors

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);

Which results enter image description here

But I want to be like enter image description here

How to do like the above, with different background colors under the ticks. Please support me with this.

Thanks in advance

google-visualization charts css jquery javascript
1 Answers

If you to do want to do like this

I have done this using stepped area chart in the combo chart from the Google library... where the values for each stepped area is the value for ticks.

Here is the link for jsfiddle code

user_99456240
Related