Google Charts: Move Legend Position

Google charts: Move legend position

I believe the syntax is like this:

var options = {
legend: 'bottom'
};

Source

EDIT:
Actually, it seems to not yet be supported. Only right or none.
Source

Google Charts Legend Position Top Not Working

First, you need to use the correct library, as jsapi is out of date and should no longer be used,

according to the release notes.

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

This will only change the load statement:

old load statement...

google.load('visualization', '1.1', {
  packages: ['bar']
});

new load statement...

google.charts.load('current', {
  packages: ['corechart']
});

Next, as seen above, for classic charts, use --> packages: ['corechart']

instead of 'bar'

Google has provided a chart option, to style classic charts similar to material:

theme: 'material'

When creating a classic chart, use the following namespace:

google.visualization.ColumnChart

vs. material

google.charts.Bar

See the following working snippet:

google.charts.load('current', {  packages: ['corechart']}).then(function () {  var data = new google.visualization.DataTable();  data.addColumn('string', 'Topping');  data.addColumn('number', 'Nescafe Instant');  data.addColumn('number', 'Folgers Instant');  data.addColumn('number', 'Nescafe Beans');  data.addColumn('number', 'Folgers Beans');  data.addRows([    ['2001', 500, 1200, 816, 200],    ['2002', 163, 231, 539, 594],    ['2003', 125, 819, 200, 578],    ['2004', 197, 536, 613, 500]  ]);
  var options = {    chartArea: {      height: '100%',      width: '100%',      top: 64,      left: 64,      right: 32,      bottom: 32    },    height: '100%',    width: '100%',    isStacked: true,    legend: {      position: 'top',      textStyle: {        color: '#999'      }    },    title: 'Year-by-year coffee consumption'  };
  var container = document.getElementById('chart_div');  var chart = new google.visualization.ColumnChart(container);
  drawChart();  window.addEventListener('resize', drawChart, false);  function drawChart() {    chart.draw(data, options);  }});

html, body {  height: 100%;  margin: 0px 0px 0px 0px;  overflow: hidden;  padding: 0px 0px 0px 0px;}
.chart {  height: 100%;}

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

Column Google chart legend position issue

If you want the legend at the top of your chart, you need to set the legend.position option to "top":

legend: { position: 'top', alignment: 'start' }

and when using a ChartWrapper, your options need to be inside the "options" parameter:

var wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: Dydata,
    containerId: 'visualization',
    options: {
        legend: { position: 'top', alignment: 'start' },
        width: 520,
        height: 350
    }
});
wrapper.draw();

Google Charts Legend Position Not Working

legend.position: ['top', 'bottom'] -- are just a couple of the many options that don't work on material charts

see Tracking Issue for Material Chart Feature Parity #2143 for an extensive list

however, these options will work on a core chart...

core --> google.visualization.ColumnChart -- using --> packages: ['corechart']

material --> google.charts.Bar -- using --> packages: ['bar']

there is also an option to get a core chart close to the look & feel of material

theme: 'material'

see following working snippet using core chart instead...

google.charts.load('current',{'packages':['corechart']});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 = {  chartArea: {    height: '56%'  },  series: {    1: {      targetAxisIndex: 1    }  },  hAxis: {    title: 'Name'  },  vAxes: {    0: {      title: 'Submission Count'    },    1: {      title: '% Percent'    }  },  theme: 'material',  legend: {     position : 'bottom'  }};
var table = new google.visualization.ColumnChart(document.getElementById('table1'));
table.draw(data, options);}

<html>
<head>  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script></head>
<body>  <div id='table1'></div></body>
</html>

Legend position not working in stacked column charts (Google Charts)

the list of options that don't work in Material charts can be found here...

Tracking Issue for Material Chart Feature Parity #2143

which includes...

legend.position: ['top', 'bottom']

Google Charts: Move Legend Position