CODEWITHSUNDEEP
javascriptgoogle-visualization
MarkP
MarkP

Reputation: 2566

Google AreaChart not displaying Vertical Gridlines.

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

Upvotes: 2

Views: 9137

Answers (1)

asgallant
asgallant

Reputation: 26340

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/

Upvotes: 6

Related Questions