2

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
}

1 Answer 1

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>

3
  • This works. Thanks. So you have removed the styles for tooltip while creating highchart and then applied them from CSS. Can't I use the 'style:' property inside the tooltip? Apr 28, 2015 at 12:11
  • @SufianRashid Yes. I don't work more in highchart but as per my knowledge no. But, you can try it. But you can give gievn style. check api.highcharts.com/highcharts#tooltip
    – ketan
    Apr 28, 2015 at 12:14
  • Hope above link helps. and you mark it as answer if it solved your issue.
    – ketan
    Apr 28, 2015 at 12:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.