CODEWITHSUNDEEP
javascriptjquerycsschartsgoogle-visualization
praveen kumar
praveen kumar

Reputation: 1524

google charts vAxis ticks multiple colors with respective light background

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

Upvotes: 3

Views: 256

Answers (1)

Vikas Rinvi
Vikas Rinvi

Reputation: 1288

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

Upvotes: 4

Related Questions