highcharts - how to center text inside donut chart embedded in combination chart

Question

I would like to know how to center text and be able to update that text on hover inside of a donut chart that is part of a combination chart.

I have seen solutions using the chart title, verticalAlign and setTitle but that approach doesn't appear to work when the donut chart is part of a combination chart.

I have also tried using a div positioned in the center of the donut chart. That doesn't work well because when the y access labels of the primary series get wider (i.e. more digits) then the donut chart slides to the right and the div is no longer centered on the donut chart.

I have added a jsfiddle that can be used to demonstrate any suggestions you might have on getting rendered text, a title, a div, whatever centered on the donut chart that will also move with that chart.

{type: 'pie',
 name: 'Total consumption',

http://jsfiddle.net/sJfuA/

Answer 1

You can use renderer to add custom text on your chart. Then you can add events using element.on(). See live example: http://jsfiddle.net/sJfuA/2/

    $('#container').highcharts({
        chart: {
            events: {
                load: function() {
                    var chart = this,
                        rend = chart.renderer,
                        pie = chart.series[4],
                        left = chart.plotLeft + pie.center[0],
                        top = chart.plotTop + pie.center[1],
                        text = rend.text("text", left,  top).attr({ 'text-anchor': 'middle'}).add();

                    text.on("mouseover", function() {
                       alert("hover!"); 
                    });

                }
            }
        }, 
        ...
     });