Highcharts：如何将图例中的项目与右侧的多行对齐

Question

我有一个图表，其中包含多行项目的水平图例。图例框与右侧对齐，但内部的项目与左侧对齐。如何让物品也正确对齐？

这是我当前图表的小提琴：http://jsfiddle.net/vgkcgxe4/
小提琴HTML：

<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/js/modules/exporting.js"></script>
<div id="container"></div>

小提琴CSS：

@import 'https://code.highcharts.com/css/highcharts.css';
#container {
  height: 400px;
  max-width: 800px;
  min-width: 400px;
  margin: 0 auto;
}

小提琴JS：

$(function() {
  $('#container').highcharts({
    title: "",
    chart: {
      spacing: [5, 5, 5, 5],
      marginLeft: 32,
      type: "column"
    },
    legend: {
      align: "right",
      verticalAlign: "top",
      itemDistance: 15,
      symbolHeight: 8,
      symbolPadding: 0,
      padding: 0,
      margin: 20,
      itemMarginBottom: 5,
      width: 375
    },
    series: [{
      name: "First",
      data: [8, 10, 8, 12],
    }, {
      name: "Second",
      data: [13, 11, 11, 3]
    }, {
      name: "Third",
      data: [9, 9, 9, 9]
    }, {
      name: "Fourth",
      data: [9, 12, 9, 6]
    }, {
      name: "Fifth",
      data: [13, 6, 5, 11]
    }, {
      name: "Sixth",
      data: [10, 6, 6, 7]
    }, {
      name: "Seventh",
      data: [4, 9, 5, 8]
    }, {
      name: "Eighth",
      data: [9, 7, 2, 8]
    }],
    yAxis: {
      visible: true,
      reversedStacks: false,
      tickPosition: "inside",
      offset: 0,
      type: "linear",
      title: {
        text: "axis title",
        align: "high",
        textAlign: "left",
        rotation: 0,
        offset: 0,
        margin: 0,
        y: -5,
        x: -7
      },
      labels: {
        align: "right",
        y: -5
      },
      tickPositions: [0, 6, 12, 18]
    },
    xAxis: {
      labels: {
        y: 16
      },
      categories: ["2016 Jul", "2016 Aug", "2016 Sep", "2016 Oct"]
    }
  });
});

以下是我希望这些项目的图像：link
我尝试在图例上使用“useHTML”，但项目保持绝对定位。