Highcharts donut - Center text - highcharts

Question

I got a donut chart which I want to output text inside when hovering the different parts in the chart. I'm almost done, but I can't seem to get the text to center correctly.
JSFiddle: http://jsfiddle.net/K5dhu/
Code:
$(function() {
var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'DivGraphCategories',
type: 'pie',
height: 250,
width: 250,
borderRadius: 0
},
credits: {
enabled: false
},
title: false,
plotOptions: {
pie: {
borderWidth: 0,
startAngle: 90,
innerSize: '70%',
size: '100%',
shadow: false,
// {
// color: '#000000',
// offsetX: 0,
// offsetY: 2,
// opacity: 0.7,
// width: 3
// },
dataLabels: false,
stickyTracking: false,
states: {
hover: {
enabled: false
}
},
point: {
events: {
mouseOver: function(){
this.series.chart.innerText.attr({text: this.y});
},
mouseOut: function(){
this.series.chart.innerText.attr({text: "Mouseout value"});
}
}
}
}
},
series: [{
data: [
{y: 6926, name: 'hopp1'},
{y: 1370, name: 'hopp2'},
{y: 1250, name: 'hopp3'},
{y: 10000, name: 'hopp4'},
{y: 1062, name: 'hopp5'},
{y: 6376, name: 'hopp6'},
{y: 2514, name: 'hopp7'},
{y: 349, name: 'hopp8'}
]
// data: [
// ['Firefox', 44.2],
// ['IE7', 26.6],
// ['IE6', 20],
// ['Chrome', 3.1],
// ['Other', 5.4]
// ]
}]
},
function(chart) { // on complete
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the text
chart.innerText = chart.renderer.text('Start value', 112, 125).css({
width: circleradius*2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
});
As you can see, the text is aligned left and positioned at 112, 125 at start. Is there any way to set the position each time based on how long the text is? Or any property that sets this text to center, no matter whats in there.. The text is set on hover within the mouseOver function.

Answer 1

Well, this might not be the perfect definition of an answer to this question. But it's a way of solving the problem in another way, which gives far more customizability.
Create a div or something outside the graph area and position it with css exactly at the center of where the donut chart will appear.
Example:
<div class="graph_center">
<h5 id="GraphCenterName"></h5>
<h3 id="GraphCenterValue"></h3
</div>
Then you would just use the mouseover and mouseout events like this:
point: {
events: {
mouseOver: function(){
$('#GraphCenterName').text(this.name);
$('#GraphCenterValue').text(this.y);
},
mouseOut: function(){
$('#GraphCenterName').text('Whatever default text you want');
$('#GraphCenterValue').text('Whatever default value you want"');
}
}
}