Highcharts Donut Chart text in the center changes when it freezes

Question

I'm looking for a way to have text in the center of a hover donut chart change. When there is no freezing state, the total amount will be displayed in the center (here I represent the days of vacation, so it can be 15 days of vacation). When hovering, the text in the center should correspond to the segment hovering (available, requested and accepted holidays), but I can’t figure out how to change the text in the center based on the hover. Does anyone have any ideas? Any help is much 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 a custom property created as follows:

 chart.innerText = chart.renderer.text('112', 112, 125).css({ ... }).add();