Formatting jqplot Pie Chart to drop trailing zeros from percentage labels.

It also shows how to make legend text correspond to the swatch color (the square in front of the series' text).

HTML

<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/jquery.jqplot.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.pieRenderer.js"></script>
<div id="chart"></div>

CSS

#chart{
    width: 400px;
    height: 400px;
}           


//jquery.jqplot.css

/*rules for the plot target div.  These will be cascaded down to all plot elements according to css rules*/
.jqplot-target {
    position: relative;
    color: #666666;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
/*    height: 300px;
    width: 400px;*/
}

/*rules applied to all axes*/
.jqplot-axis {
    font-size: 0.75em;
}

.jqplot-xaxis {
    margin-top: 10px;
}

.jqplot-x2axis {
    margin-bottom: 10px;
}

.jqplot-yaxis {
    margin-right: 10px;
}

.jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis {
    margin-left: 10px;
    margin-right: 10px;
}

/*rules applied to all axis tick divs*/
.jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick {
    position: absolute;
    white-space: pre;
}


.jqplot-xaxis-tick {
    top: 0px;
    /* initial position untill tick is drawn in proper place */
    left: 15px;
/*    padding-top: 10px;*/
    vertical-align: top;
}

.jqplot-x2axis-tick {
    bottom: 0px;
    /* initial position untill tick is drawn in proper place */
    left: 15px;
/*    padding-bottom: 10px;*/
    vertical-align: bottom;
}

.jqplot-yaxis-tick {
    right: 0px;
    /* initial position untill tick is drawn in proper place */
    top: 15px;
/*    padding-right: 10px;*/
    text-align: right;
}

.jqplot-yaxis-tick.jqplot-breakTick {
    right: -20px;
    margin-right: 0px;
    padding:1px 5px 1px 5px;
/*    background-color: white;*/
    z-index: 2;
    font-size: 1.5em;
}

.jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick,...

JavaScript

$(document).ready(function() {
  var data = [["Data Structures",12],["Compiler Programming",9],["ERP",14],["3D Qsar",16],["E-Coria",7],["SEO",9]];
    var plot = jQuery.jqplot('chart', [data], {
        seriesDefaults: {
            renderer: jQuery.jqplot.PieRenderer,
            rendererOptions: {
                // Turn off filling of slices.
                showDataLabels: true,
                // Add a margin to seperate the slices.
                sliceMargin: 2,
                // stroke the slices with a little thicker line.
            }
        },
       legend: { show:true, location: 'e' },
	  highlighter: {
    show: true,
    useAxesFormatters: false, // must be false for piechart   
    tooltipLocation: 'e',
    formatString:'%s, %P',
	}
    });
    $('#chart').bind('jqplotDataClick', function(ev, seriesIndex, pointIndex, data) {
        alert(plot.series[seriesIndex].seriesColors[pointIndex]);
    });
});