How to remove the X,Y axis grid lines on Column chart

11,747 views
Skip to first unread message

born2achieve

unread,
Oct 27, 2014, 9:13:00 PM10/27/14
to google-visua...@googlegroups.com
Hi,

I create column chart and it has vaxis and haxis grid lines. i trying hard to remove the both the grid lines. i tried to Google and it says use color:transparent. but if i do that for both the axis, it only removed the vaxis grid lines. not haxis grid lines.

Please find the attached image shows how my column chart will looks like after removing the grid lines.

please help me on this
Sampel Column Chart.png

Andrew Gallant

unread,
Oct 27, 2014, 9:51:05 PM10/27/14
to google-visua...@googlegroups.com
Setting vAxis.gridlines.color to "transparent" should work: http://jsfiddle.net/asgallant/oatbak5s/

born2achieve

unread,
Oct 28, 2014, 9:05:58 AM10/28/14
to google-visua...@googlegroups.com
Hi Andrew,

Thanks for your reply. I tried that already. Here is my code:

var options = {
                    title: "Your Summary",
                    width: 400,
                    height: 400,
                    bar: { groupWidth: "95%" },
                    legend: { position: "none" },
                    hAxis: {
                        //title: 'Status',
                        minTextSpacing: 3,
                        maxAlternation: 1,
                        titleTextStyle: {
                            color: '#82cf00',
                            fontName: '"Arial"',
                            fontSize: 10
                        },
                       
                        ticks: monthTicks,
                        //count: -1,
                       // viewWindowMode: 'pretty',
                        slantedText:true, slantedTextAngle:45
                    },
                    vAxis :
                        {
                            minValue: 0,
                            title: "Scores",
                            titleTextStyle: {
                            color: "#596770",
                            fontSize: 14,
                            bold: 1,
                            italic: 0
                            },
                            gridlines: {
                            color: 'transparent'
                            },
                            textStyle: {
                                color: "#596770"
                            },
                        },


my current output:



not sure how to remove the vertical lines on the bar. any suggestions please

Daniel LaLiberte

unread,
Oct 28, 2014, 9:53:48 AM10/28/14
to google-visua...@googlegroups.com
The vertical gridlines are actually associated with the horizontal axis, since they are based on where the horizontal ticks are placed.  So you need to specify your gridlines.color option in the hAxis options rather than the vAxis options.   

This is a frequent confusion, and we are wondering if there is a way to avoid this confusion while still allowing, for example, left and right vertical axes with different sets of gridlines for each.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

born2achieve

unread,
Oct 28, 2014, 10:18:15 AM10/28/14
to google-visua...@googlegroups.com
Hi Daniel,

Great, I understood now what could be the issue. I resolved.


Here is my resolved code after your TIP,
hAxis: {
                        //title: 'Status',
                        minTextSpacing: 3,
                        maxAlternation: 1,
                        titleTextStyle: {
                            color: '#82cf00',
                            fontName: '"Arial"',
                            fontSize: 10
                        },

                        gridlines: {
                            color: 'transparent'
                        },
                        ticks: monthTicks,
                        slantedText:true, slantedTextAngle:45
                    },
                    vAxis :
                        {
                            minValue: 0,
                            title: "Scores",
                            titleTextStyle: {
                            color: "#596770",
                            fontSize: 14,
                            bold: 1,
                            italic: 0
                            },
                            textStyle: {
                                color: "#596770"
                            },

                            gridlines: {
                                color: 'transparent'
                            },
                        },

Appreciate your time on this.

On Monday, 27 October 2014 21:51:05 UTC-4, Andrew Gallant wrote:
Reply all
Reply to author
Forward
0 new messages