Highcharts Donut Chart text in center change on hover - highcharts

Question

I'm looking for a way to have text in the center of a donut chart change on hover. When there is no hover state, the center will display the total amount (here I am representing vacation days, so it may be 15 vacation days). When hovering, the text in the center needs to match the segment hovered over (available, requested, and taken vacation days), but I cannot figure out how to change the text in the center based on hover. Does anyone have any ideas? Any help is greatly appreciated!!
http://jsfiddle.net/NVX3S/146/
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
$(function () {
var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'pie',
height: 250,
width: 250,
borderRadius: 0
},
credits: {
enabled: false
},
title: false,
tooltip: false,
plotOptions: {
pie: {
borderWidth: 6,
startAngle: 90,
innerSize: '55%',
size: '100%',
shadow: true,
// {
// color: '#000000',
// offsetX: 0,
// offsetY: 2,
// opacity: 0.7,
// width: 3
// },
dataLabels: false,
stickyTracking: false,
states: {
hover: {
enabled: true
}
}
}
},
series: [{
data: [
{y:65, color: colors[0]},
{y:15, color: colors[1]},
{y:20, color: colors[2]}
]
// 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.renderer.text('126.5', 103, 127).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();
});
});

Answer 1

Use points.events.mouseOver/mouseOut, for example: http://jsfiddle.net/NVX3S/147/
Code:
point: {
events: {
mouseOver: function(){
this.series.chart.innerText.attr({text: this.y});
},
mouseOut: function(){
this.series.chart.innerText.attr({text: 112});
}
}
}
Where innerText is just custom property, created like this:
chart.innerText = chart.renderer.text('112', 112, 125).css({ ... }).add();