Partially fill a FLOT pie chart slice with color, starting at center

Anyone know if this is possible?

Basically I need to be able to only partially shade a pie slice with color, say range of 0-10, where 0 means no color in pie slice, 10 means fully shaded. Thanks for any help!

Solution

(Disclaimer: My other answer is rather hacky in regard to the legend and correct positioning of the pie charts but can work when you cannot modify the plugin code, so here a cleaner second version.)

This is not possible with default methods but relativly simple by directly changing the pie plugin. Copy the plugin (source, version 1.1) and make following changes to your local copy:

Line 395 and 406 in function drawPie():
Add slices[i].radius to the parameters for both drawSlice() calls.
Line 423 in function drawSlice():
Change the header of the function to
```
function drawSlice(angle, color, fill, sliceRadius) {
```

Line 428 in function drawSlice(): Add this code:

if (!jQuery.isNumeric(sliceRadius)) {
    sliceRadius = radius;                    
}
else if (sliceRadius >= 0.0 && sliceRadius <= 1.0) {
    sliceRadius = radius * sliceRadius;                    
}

Line 441 to 443 (before inserting code from 3.) in function drawSlice():
Replace radius with sliceRadius.

After the above changes you can define a radius property for each datapoint / slice in the pie chart. This follows the same rules as the general radius property (if radius is between 0 and 1 it will be used as percentage of the general radius, otherwise it will be used as pixel value).

Here is a fiddle showing it with different values for the radius property:

var data = [{
    label: 'red',
    color: 'red',
    data: 1,
    radius: 100 // radius in pixel (about 50% here)
}, {
    label: 'green',
    color: 'green',
    data: 3
    // default is the general radius
}, {
    label: 'blue',
    color: 'blue',
    data: 2,
    radius: 0.8 // radius 80% of general radius (about 160 pixel here)
}];