CODEWITHSUNDEEP
chartsgoogle-visualization
Eduardo Dallmann
Eduardo Dallmann

Reputation: 454

Google Chart hide grid zero

Set to show only the 100 and -100 grids ticks: [-100, 100], but the horizontal 0 (zero) grid appears. How to hide? 

<table class="columns">
  <tr>
    <th>Linear Scale</th>
  </tr>
  <tr>
    <td><div id="linear_div"></div></td>
  </tr>
</table>
<script>
       google.charts.load('current', {'packages':['corechart', 'line']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Population');

      data.addRows([
        [new Date(1400, 1, 1),  -44],
        [new Date(1500, 1, 1),  33],
        [new Date(1600, 1, 1),  88],
        [new Date(1700, 1, 1),  100],
        [new Date(1750, 1, 1),  200],


      ]);

      var linearOptions = {
        title: 'World Population Since 1400 A.D. in Linear Scale',
        legend: 'none',
        width: 450,
        height: 500,
        hAxis: {
          title: 'Date'
        },
        vAxis: {
          title: 'Population (millions)',
          ticks: [-100, 100]
        }
      };


      var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
       linearChart.draw(data, linearOptions);


    }
</script>

https://jsfiddle.net/dnsaudd8/

Upvotes: 1

Views: 541

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

use following option to hide 0 (baseline) 

baselineColor: 'transparent'

see following working snippet... 

google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Population');
  data.addRows([
    [new Date(1400, 1, 1),  -44],
    [new Date(1500, 1, 1),  33],
    [new Date(1600, 1, 1),  88],
    [new Date(1700, 1, 1),  100],
    [new Date(1750, 1, 1),  200]
  ]);

  var linearOptions = {
    baselineColor: 'transparent',
    title: 'World Population Since 1400 A.D. in Linear Scale',
    legend: 'none',
    width: 450,
    height: 500,
    hAxis: {
      title: 'Date'
    },
    vAxis: {
      title: 'Population (millions)',
      ticks: [-100, 100]
    }
  };


  var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
  linearChart.draw(data, linearOptions);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linear_div"></div>

Upvotes: 2

Related Questions