Highcharts图例居中问题：设置width为100%时需改为底部居中

问题场景 #

当给Highcharts图例设置width: '100%'并希望它显示在底部居中时，图例默认会靠左对齐，需要调整配置实现居中效果。原配置示例：

legend:{
  backgroundColor: 'rgba(255,255,255)',
  width : '100%',
}

修复方案 #

在图例配置中添加两个关键属性即可解决：

• align: 'center'：指定图例内容在容器内居中对齐
• verticalAlign: 'bottom'：固定图例在图表底部位置

完整配置代码：

legend: {
  backgroundColor: 'rgba(255,255,255)',
  width: '100%',
  align: 'center',
  verticalAlign: 'bottom'
}

补充说明 #

如果图例项数量较多自动换行，align: 'center'会保证每一行的图例内容都保持居中状态，结合width:100%让图例容器占满图表横向宽度，就能完美实现底部居中的显示效果。

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