Left align Google chart in a page using bootstrap 3?

Question

In my page, I have the below divs

<div><h2>Test</h2></div>
<div id="chart_div" style="width: 1200px; height: 600px;"></div>      

I don't have any style, other than the default provided by bootstrap 3.
But the google chart is rendered with so much empty space at left (see the screenshot)
is there a way to fix this?

Fix Update : As per davidkonrad suggestion, I added the below option in my chart

chartArea : { left: 30, top:30 }

Now it works

Answer 1

It is not caused by bootstrap - can easily reproduce the behaviour in a "fresh" bootstrap 3. It is caused by the enormous width of the container.

When chartArea is not defined, then chartArea.left, top, width and height is per default set to auto, which means the chart tries to center itself inside the container, both vertically and horizontally. You can observe that yourself by setting a border around the container. Set chartArea.left to force the chart-position where you want it, for example :

var options = {
   chartArea : { left: 80 }
};

or

var options = {
  chartArea : { left: "10%" }
};