title: ChartJS 2.0 - Huddle labels on pie chart
body: <p>I need to drawn charts with many values (part of them are close) and long values labels. The values should be displayed on the chart (not legends). I'm using the following plugin to display the labels:</p>
  
  <pre><code>var drawItemsValuesPlugin = {
      afterDraw: function(chartInstance) {
  
          var ctx = chartInstance.chart.ctx;
  
          // render the value of the chart above the bar
          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
          ctx.textAlign    = 'center';
          ctx.textBaseline = 'bottom';        
          ctx.strokeStyle = 'black';
          ctx.font = "bold 11pt Arial";
          ctx.lineWidth = 0.3;
  
          chartInstance.data.datasets.forEach(function (dataset) {
                  for (var i = 0; i &lt; dataset.data.length; i++) {    
                      var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                          total = dataset._meta[Object.keys(dataset._meta)[0]].total,
                          mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
                          start_angle = model.startAngle,
                          end_angle = model.endAngle,
                          mid_angle = start_angle + (end_angle - start_angle)/2;
  
                      var fact = (chartInstance.config.type == 'pie'?
                          (i%2==0?1:1.6):
                          (i%2==0?0.9:1.1)
                      );
                      var x = mid_radius * fact * Math.cos(mid_angle);
                      var y = mid_radius * fact * Math.sin(mid_angle);
  
                      ctx.fillStyle = '#fff';
  
                      var label = chartInstance.config.data.labels[i];
                      var percent = String(Math.round(dataset.data[i]/total*100)) + "%";
                      ctx.fillText(label, model.x + x, model.y + y);
                      ctx.strokeText(label, model.x + x, model.y + y);
                      // Display percent in another line, line break doesn't work for fillText
                      ctx.fillText(dataset.data[i] + ' ('+percent+')', model.x + x, model.y + y + 15);
                      ctx.strokeText(dataset.data[i] + ' ('+percent+')', model.x + x, model.y + y + 15);
                  }
              });
      }
  };
  </code></pre>
  
  <p>But I'm facing the following problem:</p>
  
  <p><a href="https://i.stack.imgur.com/ZrEgP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZrEgP.png" alt="enter image description here"></a></p>
  
  <p>The values labels are huddle. A simple solution is put the labels orbiting the chart, as displayed in figure bellow:</p>
  
  <p><a href="https://i.stack.imgur.com/7sMo7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7sMo7.png" alt="enter image description here"></a></p>
  
  <p>How can I get this labels positions with Chart JS 2.0?</p>