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.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?
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' }
}
);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With