javascript - How can I hide hAxis labels in Google material bar chart? -

i show stacked bar chart grouped bars , 1 row of horizontal axis labels. found, not possible show stacked barchart grouped bars using visualization.barchart of google visualization api v44 , possible material bar chart using series array option.

for example:

google.charts.load('44', {    packages: ['corechart', 'bar']  });  google.charts.setonloadcallback(drawchart);    function drawchart() {    var data = new google.visualization.datatable();    data.addcolumn('string', 'nothing');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'red');      data.addrows([      ['row 1', 14, 1, 3, 0, 1, 36],      ['row 2', 10, 1, 0, 2, 2, 23],    ]);        var options = {      legend: {        position: 'none'      },      isstacked: true,      series: {        5: {          targetaxisindex: 1        }      },      haxis: {        viewwindow: {          min: 0,          max: 40        },        textposition: 'none',        ticks: [null],        title: 'hide 1 of axis values	'      },      bars: 'horizontal'    };      var chart = new google.charts.bar(document.getelementbyid('stacked-grouped-chart'));    chart.draw(data, google.charts.bar.convertoptions(options));  }

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

my problem horizontal axis range/ticks match both bars, showing 2 exact same tick values on bottom redundant. non-material barchart, textposition: 'none' option can used hide labels axis, but option not supported in material bar charts. there way 1 of these axis labels/ticks can hidden in non-hacky way?

note textposition has no effect.

couldn't find way hide tick marks

but can move them top

see following working snippet...

google.charts.load('44', {    callback: drawchart,    packages: ['bar']  });    function drawchart() {    var data = new google.visualization.datatable();    data.addcolumn('string', 'nothing');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'red');      data.addrows([      ['row 1', 14, 1, 3, 0, 1, 36],      ['row 2', 10, 1, 0, 2, 2, 23]    ]);      var options = {      legend: {        position: 'none'      },      isstacked: true,      series: {        5: {          axis: 'red'        }      },      axes: {        x: {          red: {            label: '',            side: 'top'          }        }      },      haxis: {        viewwindow: {          min: 0,          max: 40        },        title: 'hide 1 of axis values'      },      bars: 'horizontal'    };      var chart = new google.charts.bar(document.getelementbyid('stacked-grouped-chart'));    chart.draw(data, google.charts.bar.convertoptions(options));  }

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

---

update

another option modify chart's svg manually,
once 'ready' event fires

here, top labels hidden when chart drawn...

google.charts.load('44', {    callback: drawchart,    packages: ['bar']  });    function drawchart() {    var data = new google.visualization.datatable();    data.addcolumn('string', 'nothing');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'blue');    data.addcolumn('number', 'red');      data.addrows([      ['row 1', 14, 1, 3, 0, 1, 36],      ['row 2', 10, 1, 0, 2, 2, 23]    ]);      var options = {      legend: {        position: 'none'      },      isstacked: true,      series: {        5: {          axis: 'red'        }      },      axes: {        x: {          red: {            label: '',            side: 'top'          }        }      },      haxis: {        viewwindow: {          min: 0,          max: 40        },        title: 'hide 1 of axis values'      },      bars: 'horizontal'    };      var chart = new google.charts.bar(document.getelementbyid('stacked-grouped-chart'));    google.visualization.events.addlistener(chart, 'ready', function () {      $.each($('#stacked-grouped-chart text'), function (index, label) {        if (parsefloat($(label).attr('y')) < 20) {          $(label).attr('fill', 'none');        }      });    });    chart.draw(data, google.charts.bar.convertoptions(options));  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://www.gstatic.com/charts/loader.js"></script>  <div id="stacked-grouped-chart"></div>