Angular中Highcharts如何将折线图图例移动到X轴下方

我在Angular应用中集成Highcharts绘制折线图，当前图表效果如下：
line_charts

现有代码可正常运行，但需要将图中红圈标注的系列图例移动到X轴下方位置，原实现代码如下：

Highcharts.chart('container', {
  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },
  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },
  yAxis: {
    title: {
      text: 'Number of Employees'
    }
  },
  xAxis: {
    accessibility: {
      rangeDescription: 'Range: 2010 to 2017'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },
  series: [
    {
      name: 'Installation',
      data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    },
    {
      name: 'Manufacturing',
      data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    },
    {
      name: 'Sales & Distribution',
      data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    },
    {
      name: 'Project Development',
      data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    },
    {
      name: 'Other',
      data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }
  ],
  responsive: {
    rules: [
      {
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom'
          }
        }
      }
    ]
  }
});

直接修改全局legend配置项即可，无需额外开发：

• 将layout属性从vertical改为horizontal，让图例水平排列，适配底部横向布局
• 将align属性从right改为center，让图例在底部居中显示
• 将verticalAlign属性从middle改为bottom，把图例定位到图表底部、X轴下方位置

修改后的legend配置段：

legend: {
  layout: 'horizontal',
  align: 'center',
  verticalAlign: 'bottom'
}

补充：如果图例和X轴刻度文字出现重叠，可以给legend增加y配置项设置向下偏移量，例如y: 12即向下偏移12像素，按需调整数值即可。原有代码中宽度小于500px的响应式规则和新配置不冲突，无需额外修改。

内容的提问来源于stack exchange，提问作者Rinky Sharma