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/
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.
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.
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.
Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.
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.
Set gridlines color to none
gridlines: {
color: 'none'
}
This will also work
Tested & Working...
options = {
vAxis: {
gridlines: {
interval: 0
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With