HTML Question

How to add more gridlines in google chart?

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

There are 2 ways you can achieve this (Ref : Google Line Chart).

  1. 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>

  1. 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>

Comments