The plot(s) on this page use the following plugin:

<script type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>

The default pie chart automatically sizes itself (with a customizable margin) and centers itself in the plot area.

line1 = [['frogs',3], ['buzzards',7], ['deer',2.5], ['turkeys',6], ['moles',5], ['ground hogs',4]];
plot1 = $.jqplot('chart1', [line1], {
    title: 'Default Pie Chart',
    seriesDefaults:{renderer:$.jqplot.PieRenderer}
});

By changing the "sliceMargin" property (default 0), you can "explode" the pie chart into separate slices. The chart is again automatically sized and positioned to fit into the plot area and account for the legend.

plot2 = $.jqplot('chart2', [line1], {
    title: 'Pie Chart with Legend and sliceMargin',
    seriesDefaults:{renderer:$.jqplot.PieRenderer, rendererOptions:{sliceMargin:8}},
    legend:{show:true}
});

Want all the pie taste with less filling? By setting the "fill:false" option, slices will be stroked but not filled. You can control the line width of the slices and the margin between slices.

plot3 = $.jqplot('chart3', [line1], {
    title: 'Pie Chart without the Filling',
    seriesDefaults:{
        renderer:$.jqplot.PieRenderer, 
        rendererOptions:{sliceMargin:8, fill:false, shadow:false, lineWidth:5}
    },
    legend:{show:true, location: 'w'}
});

Still too many calories? You can specify a smaller pie by manually setting the "diameter" property.

plot4 = $.jqplot('chart4', [line1], {
    title: 'Small Pie Chart',
    seriesDefaults:{
        renderer:$.jqplot.PieRenderer, 
        rendererOptions:{sliceMargin:8, fill:false, shadow:false, lineWidth:5, diameter:100}
    },
    legend:{show:true, location: 'w'}
});