5

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();
    });
});
sarahholden
  • 641
  • 7
  • 14

1 Answers1

6

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();
Paweł Fus
  • 44,795
  • 3
  • 61
  • 77
  • There in jsfiddle you have mentioned var circleradius = 102; how you got that circleradius ? is there is any way to get that dynamically ? – vivex Jan 20 '15 at 07:52
  • It's better to ask that question to the author of question. It's not my part of code. I would calculate inner position that way: http://jsfiddle.net/NVX3S/904/ (just play around with bounding box of label and center position of the pie). – Paweł Fus Jan 20 '15 at 10:47
  • @PawełFus Any thoughts on making the hover effect effective in the innerSize as well? – Faisal Ashfaq Sep 18 '15 at 06:44
  • Inside the pie (empty space, created by `innerSize`) we don't have SVG shapes, so we can not fire `mouseover` event in HTML. Probably you need to bind `mouseover` to the container and calculate(?) which slice would be hovered if there was a slice.. – Paweł Fus Sep 18 '15 at 11:10