Google Charts no gridlines but I want the ticks to have a black marker

Question

I would like to remove the gridlines of the hAxis but with keeping the ticks\' little black marker.

My code looks like this:

var optionsSmall = {
                


        

Answer 1

you could use a line series with values set to zero,
that has blank 'line' annotations
fontSize will control the length of the "tick"

annotations: {style: 'line', textStyle: {fontSize: 10}},

you can "turn off" the extra series with...

colors: ['transparent', ...]
0: {enableInteractivity: false, visibleInLegend: false}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', {role: 'annotation', type: 'string'}, 'y1'],
    [new Date(2017, 6, 6, 1), 0, '', 1000],
    [new Date(2017, 6, 6, 2), 0, '', 2000],
    [new Date(2017, 6, 6, 3), 0, '', 3000],
    [new Date(2017, 6, 6, 4), 0, '', 4000],
    [new Date(2017, 6, 6, 5), 0, '', 5000],
    [new Date(2017, 6, 6, 6), 0, '', 6000]
  ]);


  var optionsSmall = {
    annotations: {style: 'line', textStyle: {fontSize: 10}},
    colors: ['transparent', '#4572A7'],
    hAxis: {minorGridlines: {color: '#000'}, gridlines: {color: 'transparent'}, format:'MM/d/y', textStyle: {fontSize: 9}},
    pointSize: 0,
    series: {
      0: {enableInteractivity: false, visibleInLegend: false},
      1: {targetAxisIndex: 1},
      2: {targetAxisIndex: 0, type: 'line'}
    },
    vAxis: {viewWindow: {min: 0}},
    vAxes: {
      0: {gridlines: {count: 0}, textStyle: {fontSize: 9}},
      1: {gridlines: {count: 8}, textStyle: {fontSize: 9}},
    },
    chartArea:{right:80,top:22, bottom:50, width:'100%',height:'100%'},
    tooltip: {trigger: 'none', showColorCode: false}
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, optionsSmall);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>