google.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',
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

      chart.draw(data, options);
  }

this code only shows horizontal grid line, I want to show vertical lines also.

  google.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',
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

      chart.draw(data, options);
  }

this code only shows horizontal grid line, I want to show vertical lines also.

• javascript
• html
• google-visualization

1 Answer 1

Check vAxis.gridlines and hAxis.gridlines in these docs.

vAxis.gridlines is an object with properties to configure the gridlines on the vertical axis. To specify properties of this object, you can use object literal notation, as shown here:

 {color: '#333', count: 4}

You can use the following in your options for the vertical gridlines:

vAxis.gridlines: {color: '#333', count: 4}

EDIT: See these examples:
http://jsfiddle/rdesai/R4DGp/2/
http://jsfiddle/8eCSW/1/

Hope it helps. :)