Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display the labels outside the pie chart in jqplot?

Jqplot has the chart like following

enter image description here

jqplot Chart

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

enter image description here

high chart is available at here fiddle

hight charts

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

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

like image 951
Pandiyan Cool Avatar asked Nov 01 '22 06:11

Pandiyan Cool


1 Answers

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' }
    }
  );
});

enter image description here

like image 196
Rahul Talar Avatar answered Nov 14 '22 09:11

Rahul Talar