Column Google chart legend position issue

Question

I want to simply set the marked place legend on top of the graph.
The following is the Google Chart code which does not work:

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

Thornton

Answer 1

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();

Cheltenham

how to do it below of chart? – Rosaleerosaleen

You should be able to change the value of the position key to 'bottom' to move the legend to the bottom of the chart: legend: { position: 'bottom' }. – Cheltenham

Answer 2

we need to add the code inside option section eg. as below :

chart1.options = {
        legend: { position: 'top', alignment: 'end' },
        "title": "Sales per month",
        "isStacked": "true",
        // "fill": 20,
        "displayExactValues": true,
        "vAxis": {
            "title": "Sales unit",
            "gridlines": {
                "count": 10
            }
        },
        "hAxis": {
            "title": "Date"
        }
    };

Butyrin

Answer 3

I have used below api to fix the issue :

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

Exhilaration

This breaks the chart. bad answer. – Streak