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

Question

I would like to show a stacked bar chart with grouped bars and only one row of horizontal axis labels. From what I found, it is not currently possible to show a stacked BarChart with grouped bars using visualization.BarChart as of the Google Visualization API v44 , but this is possible with the material Bar chart by using the 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 one of the 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 is that the horizontal axis range/ticks match for both bars, so showing 2 with the exact same tick values on the bottom is redundant. With the non-material BarChart , the textPosition: 'none' option can be used to hide labels for an axis, but this option is not currently supported in material bar charts . Is there another way that one of these axis labels/ticks can be hidden in a non-hacky way?

Note that textPosition has no effect.

Answer 1

couldn't find a way to hide the tick marks

but you can move them to the 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 one of the 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 would be to modify the chart's svg manually,
once the 'ready' event fires

here, the top labels are hidden when the chart is 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 one of the 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>

Answer 2

var 选项 = { hAxis : { 格式 : 'none' } }