Google Bar Chart Max Bar Width

I have a Google Bar Chart inside a fixed-width div. In some cases, I have many bars, but sometimes I only get 1 or 2 bars. The problem is that in this case, I got a chart like this

Solution 1:

The solution is to add blank columns when there are not enough columns initially.

for (var i = 0; i < n; i++) {
    if (i % 2 == 0)
        rows.push([" ", null])
    else
        rows.unshift([" ", null])
}
dataTable.addRows(rows);

Solution 2:

bar.groupWidth option doesn't work on Material charts

even with google.charts.Bar.convertOptions

tried versions '41' thru 'current'

example...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Category');
    data.addColumn('number', 'Motivation Level');
    data.addRows([
      ['10h', 5]
    ]);

    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions({
      bar: {
        groupWidth: 20
      }
    }));
  },
  packages: ['bar']
});

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>

Edit

only other option would be to modify the SVG directly when the chart's 'ready' event fires but this is not recommended

see following example...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Category');
    data.addColumn('number', 'Motivation Level');
    data.addRows([
      ['10h', 5]
    ]);

    var container = document.getElementById('chart_div');
    var chart = new google.charts.Bar(container);

    // modify SVG on 'ready'
    google.visualization.events.addListener(chart, 'ready', function () {
      var bars = container.getElementsByTagName('path');
      Array.prototype.forEach.call(bars, function(bar) {
        // reduce width by 50%
        bar.setAttribute('transform', 'scale(0.5,1)');
      });
    });

    chart.draw(data, {});
  },
  packages: ['bar']
});

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>

Solution 3:

I used the following (inspired by @Amaud)

To prevent a bar-chart with one very thick row, I add blank rows using the following code

if (tData.getNumberOfRows()==1) {
        addRow(tData,' ',1);
        addRow(tData,' ',1);
    }

The full code is as follows:

Note that the function addRow adds a row to the chart only if there is a value, therefore sometimes there can be only one row which ends up being very thick.

var tData = new google.visualization.DataTable();
tData.addColumn('string','Type');
tData.addColumn('number','Amount (Millions)");
addRow(tData,'Row1', a1);
addRow(tData,'Row2', a2);   
addRow(tData,'Row3', a3);    
addRow(tData,'Row4', a4);
if (tData.getNumberOfRows()==1) {
    addRow(tData,'',1);
    addRow(tData,'',1);
  }

 var options = {
        ...
      };

var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(tData, options);


function addRow(tData,text,num) {
   if (num>0) {
       tData.addRow([text,num/1000000]);
    }
}