How to place data labels out side the donut chart with lines using jqplot?

Question

If the area is very small then the labels are getting overlapped in the donut chart. How to place the data labels outside the donut chart with lines. Currently I am able to draw the labels inside the chart. Find the sample code from here:

$(document).ready(function(){
  var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];

  var plot3 = $.jqplot('chart4', [s1], {
    seriesDefaults: {
      // make this a donut chart.
      renderer:$.jqplot.DonutRenderer,
      rendererOptions:{
        // Donut's can be cut into slices like pies.
        sliceMargin: 3,
        // Pies and donuts can start at any arbitrary angle.
        startAngle: -90,
        showDataLabels: true,
        // By default, data labels show the percentage of the donut/pie.
        // You can show the data 'value' or data 'label' instead.
        dataLabels: 'value'
      }
    }
  });
});

fiddle

This is my expected output:

Helps much appreciated

Answer 1

Ok, what you need to set is:

dataLabelPositionFactor: 2

Please see jsFiddle here:

http://jsfiddle.net/9gXc3/1/

And further info here:

http://www.jqplot.com/docs/files/plugins/jqplot-donutRenderer-js.html

Update

I'd also set the padding too to avoid overlap i.e.

padding: 50

http://jsfiddle.net/9gXc3/3/

Answer 2

Use, dataLabelPositionFactor: 1.2, inside rendererOptions.

Below is an example I used in a project:

rendererOptions: { padding: 8, showDataLabels: true, dataLabels: percentage, dataLabelFormatString: '%s%%', diameter: 300, dataLabelPositionFactor: 1.1, sliceMargin: 4, startAngle: -90, color: '#DCDCDC' }