Remove empty space in between hAxis on Google Charts

Question

I have a "vertical" material designed bar chart that receives values like this:

[1, 10],
[580, 12],
[10000, 1]

So it renders the xAxis like this:

Is there any way for me to remove the empty values of the hAxis and just leave the numbers that have values (i.e. 5000, 10000 and the smaller ones).

Have you tried a logarithmic scale, using `hAxis.logScale = true`? — Bret Cameron, Aug 13 '20 at 08:00
Yup, does't change much. When it's VERTICAL bar chart material - which is considered hAxis exactly? — OurBG, Aug 13 '20 at 08:24
The `hAxis` should always be horizontal (left to right) and the `vAxis` should always be vertical (bottom to top) — Bret Cameron, Aug 13 '20 at 08:33
It's a bit unclear what you're trying to do here. If data points are very different, there will always be gaps in a format like this. — Bret Cameron, Aug 13 '20 at 08:34

score 0 · Accepted Answer · answered Aug 13 '20 at 11:14

try using string values for the x-axis, instead of numbers...

['1', 10],
['580', 12],
['10000', 1]

see following working snippet...

google.charts.load('current', {
  packages:['bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['1', 10],
    ['580', 12],
    ['10000', 1]
  ], true);

  var options = {
    bars: 'vertical',
    chart: {
      title: 'Number of payments by amount',
    },
    hAxis: {
      title: 'Amount'
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
});

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

Remove empty space in between hAxis on Google Charts

1 Answers1