Jqplot has the chart like following

jqplot Chart

my question is how to display the labels outside a jqplot chart like the following high chart,

high chart is available at here fiddle

hight charts

<script src=".js"></script>
<script src=".js"></script>

How to achieve displaying labels outside the chart with lines in jqplot?

Jqplot has the chart like following

jqplot Chart

my question is how to display the labels outside a jqplot chart like the following high chart,

high chart is available at here fiddle

hight charts

<script src="http://code.highcharts./highcharts.js"></script>
<script src="http://code.highcharts./modules/exporting.js"></script>

How to achieve displaying labels outside the chart with lines in jqplot?

• javascript
• jquery
• css
• jqplot

• i dont understand your question? what is your need? the jsfiddle works as your image? – Nouphal.M Commented Jan 30, 2014 at 5:03
• @Nouphal.M how to display the labels in jqplot outside of the chart? its my question. – Pandiyan Cool Commented Jan 30, 2014 at 5:04
• like your second iamge? – Nouphal.M Commented Jan 30, 2014 at 5:05
• @Nouphal.M yes like that – Pandiyan Cool Commented Jan 30, 2014 at 5:07
• the jsfiddle that you provided already draws such a chart. Do you want to know how this is achieved? – Nouphal.M Commented Jan 30, 2014 at 5:09

3 Answers 3

dataLabelPositionFactor controls position of label on slice. Increasing will slide label toward edge of pie, decreasing will slide label toward center of pie.

dataLabelPositionFactor : 1.2,

default dataLabelThreshold value is 3, hence values <=3 are not displayed hence make it to 0

dataLabelThreshold : 0

 $(document).ready(function(){
  var data = [
    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
  ];
  var plot1 = jQuery.jqplot ('chart1', [data], 
    { 
      seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {
          // Put data labels on the pie slices.
          // By default, labels show the percentage of the slice.
          showDataLabels: true, 
         //dataLabelPositionFactor controls position of label on slice.  Increasing will slide label toward edge of pie, decreasing will slide label toward center of pie.
         dataLabelPositionFactor : 1.2,
         // default dataLabelThreshold  value is 3,  hence values <=3 are not displayed hence make it to 0
         dataLabelThreshold : 0
        }
      }, 
      legend: { show:true, location: 'e' }
    }
  );
});

I used the following settings to place the legend outside the pie chart and it worked for me:

legend: {show: true, location: 'ne',placement: 'outside'},

I think what you're looking for is this page.

Check out the info under the dataLabels subheading.