Im using highchart for my website that requires a chart and It renders good (no problem at all) however, due to conflict requirements, I want the legend to be put on the bottom (below the chart, move it from the right side to the bottom side) and make it horizontally centered anyone knows how to make it? I tried this (refer below)

legend: {
    enabled: true,
    floating: true,
    verticalAlign: 'bottom',
    align:'right',
    y:40
},

my overall chart code is

$('#chart_portfolio').highcharts({
                        chart: {
                        borderColor: '#ff0000',
                        width: null,
                        height: null
                        },
                        title: {
                            text: false,
                            x: -20 //center
                        },
                        legend: {
                            enabled: true,
                            floating: true,
                            verticalAlign: 'bottom',
                            align:'center'
                        },
                        xAxis: {
                            categories: portfolio_creation_date //this is an array
                        },
                        yAxis: {
                            title: {
                                text: false
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#ff0000'
                            }]
                        },
                        tooltip: {
                                shared: true,
                                crosshairs: true
                            },

                        series: [{
                            name: 'Future',
                            data: portfolio_future, //this is an array
                            color: '#0f00ff'
                        }, {
                            name: 'In Grace Period',
                            data: portfolio_ingrace_period, //this is an array
                            color: '#fda800'
                        }, {
                            name: 'Arrears',
                            data: portfolio_in_arrears, //this is an array
                            color: '#f40404'
                        }, {
                            name: 'Good standing',
                            data: portfolio_good_standing, //this is an array
                            color: '#4da74d'
                        }]
                    }); //end of highcharts

but sadly not working. Please refer below image for a sharp detail.

Simply remove options, to use default ones: http://jsfiddle.net/ctfcnsrL/1/

                    legend: {
                        // enabled: true,
                        // floating: true,
                        // verticalAlign: 'bottom',
                        // align:'center'
                    },

more