Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

google visualization line chart remove horizontal grid lines

How do I remove the horizontal grid lines in a Google visualization line chart? I have already tried setting

minorGridlines: {count: 0 }, gridlines: {count: 0 } 

on both hAxis and vAxis.

Here is a jsfiddle of my chart.

http://jsfiddle.net/martlark/2XBhc/

enter image description here

like image 545
Martlark Avatar asked Aug 04 '13 04:08

Martlark


People also ask

How do you remove gridlines from a line graph?

Click anywhere on the chart in which you want to hide chart gridlines. On the Layout tab, in the Axes group, click Gridlines. Do one or more of the following: Click Primary Horizontal Gridlines, Primary Vertical Gridlines, or Depth Gridlines (on a 3-D chart), and then click None.

How do I use angular charts in Google?

angular-google-charts is a open source angular based wrapper for Google Charts to provides an elegant and feature rich Google Charts visualizations within an Angular application and can be used along with Angular components seamlessly.

How do you show a line graph in HTML?

To start, we create a basic HTML page with a <div> block element for our line chart. To reference this block element later in the code, we give it an id attribute like “container”. Here, we provide the <div> with the 100% width and height to render the line chart on the full screen.

Are Google Charts free?

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.


3 Answers

Set the vAxis.gridlines.color option to "transparent" to make them disappear:

vAxis: {
    gridlines: {
        color: 'transparent'
    }
}

This doesn't work for the charts when displayed in IE < 9 (as those versions use VML instead of SVG, and the chart's don't support transparency in VML). In this case, you will need to set the gridline color to match the background color of the chart.

like image 154
asgallant Avatar answered Oct 19 '22 19:10

asgallant


Set gridlines color to none

 gridlines: {
                color: 'none'
            }

This will also work

like image 40
Sedhu Avatar answered Oct 19 '22 20:10

Sedhu


Tested & Working...

options = {
  vAxis: {
    gridlines: {
      interval: 0
    }      
  }
}
like image 20
Hemant Avatar answered Oct 19 '22 19:10

Hemant