Change width of one column alone Google Chart

Question

When have two or more columns in the graph the distribution of columns works well. I use groupWidth and columns respect the value.

But when the chart returns only one column is forced to occupy the entire graph space.

How does a column to be small?

My code:

var options = {
    width: '100%',
    height: 500,
    isStacked: true,
    series: [{
        color: '#5fb560'
    }, {
        color: '#db4437'
    }, {
        color: '#3366cc'
    }],
    legend: {
        textStyle: {
            color: '#6B6A6A'
        }
    },
    bar: {
        groupWidth: '55%'
    },
    chart: {
        title: 'Disponibilidade de equipamentos',
        subtitle: 'De: 04/08/2016 até: 04/08/2016  - Torre de resfriamento (TR_01_01)',
    },
    titleTextStyle: {
        color: '#333333'
    }
};

var data = [
    ['aqui em baixo', 'Ocupada', 'Disponível', 'Sobre hora'],
    ["TR_01_01", 6.81818181818, 0, 6.18181818182]
];

var chart;
google.charts.load('current', {
    callback: function() {

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

        google.visualization.events.addListener(chart, 'ready', function() {

            $('text:contains("Disponibilidade de equipamentos")').click(function() {
                $(this).html('cliquei')
            });

            $('text:contains("aqui em baixo")').click(function() {
                $(this).html('cliquei')
            });

            $('text:contains("Disponibilidade de equipamentos")').next().attr('fill', "#6B6A6A");
        });


        chart.draw(google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions(options));
    },
    packages: ['bar']
});


$(window).on("resize", function(event) {
    chart.draw(google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions(options));
});

Answer 1

there are no options which will change the width when using a material chart

but you could add a blank row to the data table,
on either side of the existing row

see following working snippet

google.charts.load('current', {
  callback: function () {
    var options = {
        width: '100%',
        height: 500,
        isStacked: true,
        series: [{
            color: '#5fb560'
        }, {
            color: '#db4437'
        }, {
            color: '#3366cc'
        }],
        legend: {
            textStyle: {
                color: '#6B6A6A'
            }
        },
        bar: {
            groupWidth: '55%'
        },
        chart: {
            title: 'Disponibilidade de equipamentos',
            subtitle: 'De: 04/08/2016 até: 04/08/2016  - Torre de resfriamento (TR_01_01)',
        },
        titleTextStyle: {
            color: '#333333'
        }
    };

    var data = [
        ['aqui em baixo', 'Ocupada', 'Disponível', 'Sobre hora'],
        ["TR_01_01", 6.81818181818, 0, 6.18181818182]
    ];

    var dataTable = google.visualization.arrayToDataTable(data);
    if (dataTable.getNumberOfRows() === 1) {
      dataTable.insertRows(0, [[' ', null, null, null]])
      dataTable.addRow([' ', null, null, null]);
    }

    var container = document.getElementById('chart_div');
    chart = new google.charts.Bar(container);
    chart.draw(dataTable, google.charts.Bar.convertOptions(options));
  },
  packages: ['bar']
});

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