I'm having a problem positioning the legend on a dual Y-axis column chart.
According to the configuration options:
legend.position:
Position of the legend. Can be one of the following:
'bottom' - Below the chart.
'left' - To the left of the chart, provided the left axis has no series associated with it. So if you want the legend on the left, use the option targetAxisIndex: 1.
'in' - Inside the chart, by the top left corner.
'none' - No legend is displayed.
'right' - To the right of the chart. Incompatible with the vAxes option.
'top' - Above the chart.
Of these, only 'left', right' and 'none' work; all others put the legend on the right (the default).
I'd like it on the top.
Any ideas?
Code:
<script type="text/javascript" src="
https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawDualY);
function drawDualY() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Num1');
data.addColumn('number', 'Num2');
data.addRows([
[new Date(2016, 3, 30), 16196.0, 1.02],
[new Date(2016, 0, 30), 21626.0, 1.60],
[new Date(2015, 9, 31), 17613.0, 0.76],
[new Date(2015, 7, 1), 17427.0, 1.21],
[new Date(2015, 4, 2), 17119.0, 1.01]
]);
var options = {
legend: {
position: 'top'
},
series: {
0: {axis: 'Num1'},
1: {axis: 'Num2'}
},
axes: {
y: {
Num1: {label: '#1'},
Num2: {label: '#2'}
}
}
};
var material = new google.charts.Bar(document.getElementById('chart_div'));
material.draw(data, options);
}
</script>