Search code examples
javascriptchartsgoogle-visualizationgoogle-developer-toolsgoogle-barchart

Remove empty space in between hAxis on Google Charts

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: enter image description here

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).

Solution

  • 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>