title: Highcharts: Pie Charts Labels Position
body: <p>See the following example:</p>
  
  <p><a href="http://jsfiddle.net/klodoma/2xgkzyh4/" rel="nofollow noreferrer">http://jsfiddle.net/klodoma/2xgkzyh4/</a></p>
  
  <p>Is there any setting to place the labels more properly without adjusting them independently?</p>
  
  <p>Firefox should be more up, Others should be more up and right... </p>
  
  <p><a href="https://i.stack.imgur.com/eG6mM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eG6mM.png" alt="enter image description here"></a></p>
  
  <p>Code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
      $('#container').highcharts({
          title: {
              text: 'Browser market shares at a specific website, 2014'
          },
          plotOptions: {
              pie: {
                  dataLabels: {
                      connectorWidth: 12,
                      style : {
                      fontSize: 25
                      }
                  }
              }
          },
          series: [{
              type: 'pie',
              name: 'Browser share',
              data: [
                  ['Firefox', 45.0],
                  ['IE', 26.8],
                  ['Safari', 8.5],
                  ['Opera', 6.2],
                  ['Others', 0.7]
              ]
          }]
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;div id="container" style="height: 300px"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>