title: Highcharts: how to align items in legend with multiple rows to the right
body: <p>I have a chart that has a horizontal legend with items in multiple rows. The legend box is aligned to the right, but the items inside are aligned to the left. How can I get the items to align right as well?</p>
  <p>Here is a fiddle of my current chart: <a href="http://jsfiddle.net/vgkcgxe4/" rel="nofollow noreferrer">http://jsfiddle.net/vgkcgxe4/</a><br />
  Fiddle HTML:</p>
  <pre><code>&lt;script src=&quot;https://code.highcharts.com/js/highcharts.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://code.highcharts.com/js/modules/exporting.js&quot;&gt;&lt;/script&gt;
  &lt;div id=&quot;container&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>Fiddle CSS:</p>
  <pre><code>@import 'https://code.highcharts.com/css/highcharts.css';
  #container {
    height: 400px;
    max-width: 800px;
    min-width: 400px;
    margin: 0 auto;
  }
  </code></pre>
  <p>Fiddle JS:</p>
  <pre><code>$(function() {
    $('#container').highcharts({
      title: &quot;&quot;,
      chart: {
        spacing: [5, 5, 5, 5],
        marginLeft: 32,
        type: &quot;column&quot;
      },
      legend: {
        align: &quot;right&quot;,
        verticalAlign: &quot;top&quot;,
        itemDistance: 15,
        symbolHeight: 8,
        symbolPadding: 0,
        padding: 0,
        margin: 20,
        itemMarginBottom: 5,
        width: 375
      },
      series: [{
        name: &quot;First&quot;,
        data: [8, 10, 8, 12],
      }, {
        name: &quot;Second&quot;,
        data: [13, 11, 11, 3]
      }, {
        name: &quot;Third&quot;,
        data: [9, 9, 9, 9]
      }, {
        name: &quot;Fourth&quot;,
        data: [9, 12, 9, 6]
      }, {
        name: &quot;Fifth&quot;,
        data: [13, 6, 5, 11]
      }, {
        name: &quot;Sixth&quot;,
        data: [10, 6, 6, 7]
      }, {
        name: &quot;Seventh&quot;,
        data: [4, 9, 5, 8]
      }, {
        name: &quot;Eighth&quot;,
        data: [9, 7, 2, 8]
      }],
      yAxis: {
        visible: true,
        reversedStacks: false,
        tickPosition: &quot;inside&quot;,
        offset: 0,
        type: &quot;linear&quot;,
        title: {
          text: &quot;axis title&quot;,
          align: &quot;high&quot;,
          textAlign: &quot;left&quot;,
          rotation: 0,
          offset: 0,
          margin: 0,
          y: -5,
          x: -7
        },
        labels: {
          align: &quot;right&quot;,
          y: -5
        },
        tickPositions: [0, 6, 12, 18]
      },
      xAxis: {
        labels: {
          y: 16
        },
        categories: [&quot;2016 Jul&quot;, &quot;2016 Aug&quot;, &quot;2016 Sep&quot;, &quot;2016 Oct&quot;]
      }
    });
  });
  </code></pre>
  <p>Here is an image of how I would like the items to be: <a href="https://i.stack.imgur.com/tVVeR.png" rel="nofollow noreferrer">link</a><br />
  I have tried using &quot;useHTML&quot; on the legend, but the items remain absolutely positioned.</p>