problem with positioning the legend

207 views
Skip to first unread message

debo...@gmail.com

unread,
Aug 19, 2016, 3:10:03 PM8/19/16
to Google Visualization API
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>

Reply all
Reply to author
Forward
0 new messages