Я работаю с Highcharts и с целью сделать диаграмму, подобную этой: 
Highcharts пончик Диаграмма настройки
Теперь я играл вокруг с целым испытанием на некоторое время теперь, и я пришел был в состоянии достигнуть следующий пункт: 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 the data array
var browserData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
}
// Create the 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'
}
}
});
});
});
Я имею в виде того, чтобы оставить пространство пустым в кольцевой диаграмме и вставки пользовательского круга с маркировкой веса. Однако, я не уверен, как решать следующие проблемы:
1) Оставлять более определенные пробелы в моих между двумя колоннами
2) Как правильно выровнять две мои метки данных? (Как вы можете видеть в модели, они находятся в прямой линии с прикрепленными нейтральными линиями)
3) Как отображать данные под двумя метками как с фунтами, так и с процентами, как показано на изображении.