Google Charts Legend Position Not Working
<p>This is driving me nuts. I can't get the legend to move at all. This produces a chart with the legend in it's default location on the right. </p>

<p>I clearly have legend position declared as "bottom" but it's not working. Yet this is exactly what the docs say. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>google.charts.load('current',{'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addColumn('number', 'Variance');
data.addRows([
  ['Smith',  35,  {v: -.1126,   f: '-11.26%'} ],
  ['Chalk',  53,  {v: -.0126,   f: '-1.26%'}  ],
  ['Hank',  84,  {v: -.0252,   f: '-2.52%'}  ],
  ['Jordan', 46,  {v: .0688,    f: '6.88%'}   ],
  ['Bernie', 1,   {v: 0,        f: '-'}       ],
  ['Ralph',  105, {v: -.0548,   f: '-5.48%'}  ]
]);

var options = {
  series: {
    0: {axis: 'Quotes'},
    1: {axis: 'Percent'}
  },
  axes: {
    y: {
      Quotes: {label: 'Subdmission Count'},
      Percent: {label: '% Percent'}
    }
  },
  legend: { 
    position : 'bottom'
  }
};

var table = new google.charts.Bar(document.getElementById('table1'));

table.draw(data, options);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;

&lt;head&gt;
  &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div id='table1'&gt;&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>