Firstly, I have checked these out:

• How can I get a Google Visulization LineChart to display vertical gridlines?
• Google Chart: AreaChart vAxis Gridlines is Not Drawing

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 : /

Can anyone solve this?

Thanks in advance :)

Firstly, I have checked these out:

• How can I get a Google Visulization LineChart to display vertical gridlines?
• Google Chart: AreaChart vAxis Gridlines is Not Drawing

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/j29Pt/2/

Can anyone solve this?

Thanks in advance :)

• javascript
• google-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ć Commented Nov 8, 2013 at 16:19

1 Answer 1

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/asgallant/j29Pt/3/