CODEWITHSUNDEEP
htmlgoogle-api
Rohit Kumar
Rohit Kumar

Reputation: 725

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>

Upvotes: 2

Views: 6556

Answers (1)

Yogesh
Yogesh

Reputation: 397

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>

Upvotes: 3

Related Questions