title: Legend: break line so the following legends start from the next line
body: <p>I would like to separate legends with lines, for example I want to have 2 legends per line.</p>
  
  <p>I tried to use <strong>labelFormatter</strong> but the <strong>&lt; br/ ></strong> tag brakes the line only in the label's text not the line for legends.</p>
  
  <pre><code>Highcharts.chart('container', {
   ...
   legend: {
       enabled: true,
       useHTML: true,
       labelFormatter: function() {
         if (this.index == 2) {
           return this.name + '&lt;br/&gt;';
         } else {
           return this.name;
         }
       }
     },
  ...
  });
  </code></pre>
  
  <p>Demo: <a href="https://jsfiddle.net/ivane_gkomarteli/t7ep0weq/" rel="nofollow noreferrer">https://jsfiddle.net/ivane_gkomarteli/t7ep0weq/</a></p>
  
  <p>How can I change the <strong>labelFormatter</strong> so I have 2 legends per line?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Setting  <strong>itemWidth</strong> and <strong>width</strong> doesn't solve my problem because I want to break the line according to an 'if else condition'. For example:</p>
  
  <pre><code>     ...
       labelFormatter: function() {
         if (something == true){
           if (this.index == 2) {
             return this.name + '&lt;br/&gt;';
           } else {
             return this.name;
           }
         } else {
           if (this.index == 4) {
             return this.name + '&lt;br/&gt;';
           } else {
             return this.name;
           }
         }
       }
       ...
  </code></pre>
  
  <p>Possible output:</p>
  
  <ul>
  <li>1st line: 2 legends</li>
  <li>2nd line: 4 legends</li>
  <li>3rd line: 4 legends</li>
  </ul>