javascript - Highcharts Donut Chart customization -

i'm working highcharts , aiming make chart similar this:

now i've been playing around whole ordeal while , i've come been able reach following point: http://jsfiddle.net/ccjsy/24/

$(function () {     $(document).ready(function () {         var chart = null;                        var categories = ['body fat', 'lean mass'],             name = 'body fat vs. lean mass',             data = [{                 y: 69,                 color: '#f0ce0c',                 drilldown: {                     name: 'body fat',                      color: '#f0ce0c'                 }             }, {                 y: 207,                 color: '#23a303',                 drilldown: {                     name: 'lean mass' ,                     color: '#23a303'                 }             }];           // build data array         var browserdata = [];         (var = 0; < data.length; i++) {              // add browser data             browserdata.push({                 name: categories[i],                 y: data[i].y,                 color: data[i].color             });          }          // create chart         chart = new highcharts.chart({             chart: {                 renderto: 'donutchart',                 type: 'pie',                 spacingtop: 0             },             title: {                 text: 'your body fat vs lean mass',                 style: {"color": '#7d7d7d'}             },             series: [{                 name: 'weight',                 data: browserdata,                 datalabels: {                     style: {                         fontfamily: 'arialmt',                         fontsize: '15px',                         fontweight: 'bold',                         color: '#7d7d7d'                     }                 },                 innersize: '70%'             }],             tooltip: {                 valuesuffix: ' lbs'             },             plotoptions: {                 series: {                     cursor: 'pointer'                 }             }         });     }); }); 

i thinking of leaving space empty in donut chart , inserting custom circle weight labeling. however, i'm not how tackle following problems:
1) leave more defined white spaces in between 2 columns
2) how align 2 data labels? (as can see in model, in straight line neutral lines attached)
3) how display data underneath 2 labels both, pounds , percentage, shown in image.

answering each of 3 questions:

1. "more white space between columns?" -- add plotoptions.pie.borderwidth element. default value 1. used 5 give more white space.

2. "properly align 2 data labels?" -- can compute custom startangle based on 2 data values give correct angle start with. since have 2 data values in series, that's easy.

   calculate startangle pie chart

   var startangle = 0 - (90 + (180 * (data[0].y / (data[0].y + data[1].y)))); 

   notice if change y value first data object, "body fat" portion of pie chart still maintain it's correct position, portion of chart grows larger or smaller.

3. "display data underneath 2 labels custom formatting?" -- use plotoptions.pie.format apply custom formatting pie value labels.

   format: '<div style="position: relative; top: -20px; text-align: center">{point.name}<br><b><span style="font-size: 29px">{point.percentage:.0f}%</span></b> ({point.y} lbs)</div>' 

here's working jsfiddle see results. you'll still need add dark gray circle behind pie chart , add "total weight" text shouldn't difficult.

since i'm sure you'll wondering this, should mention there's lot of white space under pie chart title because it's leaving enough room other labels may appear above or below pie. since you're using 2 values on left/right sides of pie chart, doesn't change fact highcharts preparing have other labels may need displayed in surrounding area.