In google visualization combo charts how do I remove the left padding without removing the Vaxis labels

Question

I have a combo chart that I'm calling with a chartwrapper, and it centers the chart in the area it's given. I'd like to move it to the left, but when I try

chartArea: {left:0},

The values on the Y axis/V axis gridlines get cut off.

Is there a way I can shift the chart and all the elements to the left?

I'm using google visualization code playground and this is my not working code. I was trying to get the width of vAxis and it's not working but any method to shift the whole chart left and not cutting off the values or putting the values inside the chart would be great,

function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05',  165,      938,         522,             998,           450,      614.6],
['2005/06',  135,      1120,        599,             1268,          288,      682],
['2006/07',  157,      1167,        587,             807,           397,      623],
['2007/08',  139,      1110,        615,             968,           215,      609.4],
['2008/09',  136,      691,         629,             1026,          366,      569.6]
]);

var wrapper = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
dataTable: data,
options: {
          seriesType: "bars",
          series: {5: {type: "line"}}
         },
containerId: 'visualization'
});
 wrapper.draw();

var charm = wrapper.getChart();

var chi=charm.getChartLayoutInterface();

var width=cli.getBoundingBox('vAxis').width;
wrapper.setOption('chartArea.left','width');
wrapper.draw();
}

The debug code is telling me charm is null

Answer 1

You are close. You need to stick the position-setting code in a ready event listener for the wrapper, as the chart object seems to be created in an asynchronous process, so it is not guaranteed to exist yet when you call wrapper.getChart() (this is why your debug says charm is null). Also, you want to get the bounding box of vAxis#0#label , not vAxis . The fixed code looks like this:

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
        ['2004/05',  165,      938,         522,             998,           450,      614.6],
        ['2005/06',  135,      1120,        599,             1268,          288,      682],
        ['2006/07',  157,      1167,        587,             807,           397,      623],
        ['2007/08',  139,      1110,        615,             968,           215,      609.4],
        ['2008/09',  136,      691,         629,             1026,          366,      569.6]
    ]);

    var wrapper = new google.visualization.ChartWrapper({
        chartType: 'ComboChart',
        dataTable: data,
        options: {
            seriesType: "bars",
            series: {5: {type: "line"}}
        },
        containerId: 'visualization'
    });

    var runOnce = google.visualization.events.addListener(wrapper, 'ready', function () {
        google.visualization.events.removeListener(runOnce);
        var charm = wrapper.getChart();

        var cli = charm.getChartLayoutInterface();
        var width = cli.getBoundingBox('vAxis#0#label').width;
        wrapper.setOption('chartArea.left', width);
        wrapper.draw();
    });

    wrapper.draw();
}

See a working example here: http://jsfiddle.net/asgallant/KwG5N/