title: put the highchart legend to the bottom of the chart and horizontally centered
body: <p>Im using <a href="http://www.highcharts.com/" rel="nofollow noreferrer">highchart</a> 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)</p>
  
  <pre><code>legend: {
      enabled: true,
      floating: true,
      verticalAlign: 'bottom',
      align:'right',
      y:40
  },
  </code></pre>
  
  <p>my overall chart code is</p>
  
  <pre><code>$('#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
  </code></pre>
  
  <p>but sadly not working. Please refer below image for a sharp detail.</p>
  
  <p><img src="https://i.stack.imgur.com/RfqCw.jpg" alt="refer to the image"></p>