How to add more gridlines in google chart? - html

Question

I tried using
hAxis: {count: 12},
but it ignores my count of 12 and just gives me 4 gridlines. Anyone has any idea how to add more gridlines? here is my code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
hAxis: {count: 12},
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart" style="width: 900px; height: 500px"></div>

Answer 1

There are 2 ways you can achieve this (Ref : Google Line Chart).
By setting vAxis.gridlines.count to number of rows. This is better way to achieve this as this will automatically adjust with maximum value in chart. Check example below:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
vAxis: {
gridlines : {
count : 12
}
},
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
By setting vAxis.ticks providing an array of values to be shown in chart. This is preferred only when chart will be static. Check example below:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
vAxis: {
ticks: [0, 100,200,300,400,500,600,700,800,900,1000,1100,1200,1200]
},
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart" style="width: 900px; height: 500px"></div>