highcharts donut chart center text overlaps with tooltip

Question

I am showing text in the center of Highcharts Donut/Pie chart. But my problem is that the center text overlaps with the tooltip text and tooltip becomes unreadable.

I have tried changing the zIndex of tooltip to bring it to front but it doesn't work. I want the tooltip to be on top of the donut center text.

See complete chart here: http://jsfiddle.net/SufianRashid/88q5uke1

//==================== HIGH CHARTS =========================//
function RenderPieChart(chartId, chartData, donutCenterText) {
    $('#' + chartId).highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false,
            height: 270
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        title: {
            text: '',
            align: 'center',
            verticalAlign: 'middle',
            y: 0,
            useHTML: true
        },
        tooltip: {
            backgroundColor: 'white',
            useHtml: true,
            //zIndex: 99, //on top of everything
            headerFormat: '',
            pointFormat: '{point.actualCounts} {point.name}'
        },
        plotOptions: {
            pie: {
                dataLabels: {
                    formatter: function () { if (this.y != 0) return this.y + '%'; },    //don't show 0% values
                    enabled: true,
                    distance: -25,  //change this value to show label inside/outside the pie chart (negative means towards inside)
                    style: {
                        fontWeight: 'bold',
                        color: 'white',
                        textShadow: '0px 1px 2px black'
                    }
                },
                //showInLegend: true,
                startAngle: 0,
                endAngle: 360,
                center: ['50%', '50%']
            },
            //-------- On click open drill down url --------//
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            location.href = this.options.url;   //same window
                        }
                    }
                }
            }//End adding link
            //--------------------------------//
        },
        series: [{
            type: 'pie',
            innerSize: '140px',
            //--------------------//
            data: chartData
            //--------------------//
        }]
    },
        //-------- Show Center Text ------//
        function (chart) {

            var xpos = chart.plotLeft + (chart.plotWidth * 0.43);
            var ypos = chart.plotTop + (chart.plotHeight * 0.4);


            // Render the text 
            chart.innerText = chart.renderer.html(donutCenterText, xpos, ypos).add();

        }
    );  //EOF: HighChart
}

Answer 1

Try following will solved your issue:

CSS:

.highcharts-tooltip span {
    background-color:white;
    border:1px solid;
    opacity:1;
    z-index:9999 !important;
}

JQuery:

tooltip: {
           borderWidth: 0,
           backgroundColor: "rgba(255,255,255,0)",
           shadow: false,
           useHTML: true,
           //zIndex: 99, //on top of everything
           headerFormat: '',
           pointFormat: '{point.actualCounts} {point.name}'
         },

Check:

RenderPieChart(
'PieChartContainer', 
[
{ name: 'tickets opened within 24 hrs', y: 76.5, actualCounts: 54, url:'../dummyUrl.html' },
{ name: 'tickets opened within 25 to 48 hrs', y: 6.9, actualCounts: 77, url:'../dummyUrl.html' },
{ name: 'tickets opened in 49 to 72+ hrs', y: 93.1, actualCounts: 1032, url:'../dummyUrl.html' }
],
"<span id='DonutCenterText' style='text-align:center;' class='donutValuesOpen'><span>Total Open <br/>Tickets: <a href='../dummyUrl.html'> 1109 </a> <br/> </span><span class='Avg'>Average Days <br/>Open: 8 </span> </span>"
);

//==================== HIGH CHARTS =========================//
        function RenderPieChart(chartId, chartData, donutCenterText) {
            $('#' + chartId).highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: 0,
                    plotShadow: false,
                    height: 270
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                title: {
                    text: '',
                    align: 'center',
                    verticalAlign: 'middle',
                    y: 0,
                    useHTML: true
                },
                tooltip: {
                    borderWidth: 0,
                    backgroundColor: "rgba(255,255,255,0)",
                    shadow: false,
                    useHTML: true,
                    //zIndex: 99, //on top of everything
                    headerFormat: '',
                    pointFormat: '{point.actualCounts} {point.name}'
                },

                plotOptions: {
                    pie: {
                        dataLabels: {
                            formatter: function () { if (this.y != 0) return this.y + '%'; },    //don't show 0% values
                            enabled: true,
                            distance: -25,  //change this value to show label inside/outside the pie chart (negative means towards inside)
                            style: {
                                fontWeight: 'bold',
                                color: 'white',
                                textShadow: '0px 1px 2px black'
                            }
                        },
                        //showInLegend: true,
                        startAngle: 0,
                        endAngle: 360,
                        center: ['50%', '50%']
                    },
                    //-------- On click open drill down url --------//
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function () {
                                    location.href = this.options.url;   //same window
                                }
                            }
                        }
                    }//End adding link
                    //--------------------------------//
                },
                series: [{
                    type: 'pie',
                    innerSize: '140px',
                    //--------------------//
                    data: chartData
                    //--------------------//
                }]
            },


//------- Show Donut center text ------------------//
            function (chart) {

                var xpos = chart.plotLeft + (chart.plotWidth * 0.43);
                var ypos = chart.plotTop + (chart.plotHeight * 0.4);

            
                // Render the text 
                chart.innerText = chart.renderer.html(donutCenterText, xpos, ypos).add();

            }
            );  //EOF: HighChart
        }

    .highcharts-tooltip span {
        background-color:white;
        border:1px solid;
        opacity:1;
        z-index:9999 !important;
    }

   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="PieChartContainer" style="height: 400px"></div>