Google AreaChart not displaying Vertical Gridlines.

2
votes

Firstly, I have checked these out:

And they don't seem to be quite what I'm looking for so hopefully this isn't a duplicated question.

I am having trouble adding gridlines to a Google AreaChart vertical axis. I have used: 

 vAxis: {
        minValue: 0,
        gridlines: {
            color: '#f3f3f3',
            count: 5
        }
    }

But it doesnt seem to be working, When I change the value of vAxis Count: It adds lines to the hAxis :(

see : http://jsfiddle.net/j29Pt/2/

Can anyone solve this?

Thanks in advance :)

1
javascriptgoogle-visualization
As I understand it vAxis is for vertical axis and vAxis.gridlines is for horizontal lines. It seems that you have problem with hAxis.gridlines. This link says that: "This option is only supported for a continuous axis." So, you have to figure it out how to do that. – Anto Jurković

1 Answers

6
votes

You need to change your x-axis to a continuous data type (number, date, datetime, timeofday) to get the vertical lines. the hAxis.gridlines.count option controls how many vertical gridlines you get. vAxis.gridlines.count controls how many horizontal lines you get.

In your example, you could change you DataTable to this:

var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', ],
    [2004, 1000],
    [2005, 1170],
    [2006, 660],
    [2007, 1030]
]);

and your options to this:

var options = {
    title: '',
    hAxis: {
        title: 'Year',
        titleTextStyle: {
            color: '#333'
        },
        gridlines: {
            color: '#f3f3f3',
            count: 4
        },
        format: '####'
    },
    vAxis: {
        minValue: 0,
        gridlines: {
            color: '#f3f3f3',
            count: 5
        }
    }
};

see example: http://jsfiddle.net/asgallant/j29Pt/3/