Highcharts pie tooltip cuts off

Question

I am using Highcharts to generate a pie chart. It is generating it fine but the problem is that I have a fixed area to display the chart and the tooltip has large amount of text.

The tooltip is too large to fit inside the chart div, how can I fix this?

$(function () {
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'ER_inpatient_stay',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                marginTop: 0,
                plotShadow: false,
                backgroundColor: 'none',
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                borderColor: '#fff',
                itemMarginTop: 30,
                verticalAlign: 'top',
                x: 70,
                y: 0
            },
            title: {
                text: ''
            },
            tooltip: {
                userHTML: true,
                style: {
                    padding: 10,
                    width: 250,
                    height: 60,
                },
                formatter: function () {
                    return this.point.residents;
                },
            },
            exporting: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        formatter: function () {
                            return this.point.y;
                        },
                        color: 'white',
                        distance: -10
                    },
                    showInLegend: true,
                    tooltip: {}
                }
            },
            series: [{
                type: 'pie',
                size: 80,
                name: '',
                data: [{
                    'name': 'E/R Visits',
                        'y': 1,
                        'residents': "fMonroe Monroe",
                        'color': '#FA3D19'

                }, {
                    'name': 'Inpatient Stay',
                        'y': 21,
                        'residents': "fGinanni Ginanni, fJobs Jobs, fMonroe Monroe, fDickerson Dickerson, fBrown Brown, fHerter Herter, fDavidson Davidson, fFernbach Fernbach, fGentry Gentry, fJones Jones, fKostic Kostic, fnewresident lnewresident, fLogger Logger, fMaxwell Maxwell, fMcGuire McGuire, fMiller Miller, fO'Farrell O'Farrell, fProgram Program, fProgram2 Program2, frer rer",
                        'color': 'orange'
                }]
            }]
        });
    });
})

Fiddle: http://jsfiddle.net/faridu86/syrF6/

Answer 1

Please take look at the workaournd with using CSS

.highcharts-container {
    overflow: visible !important;
}
.tooltip {
    position: relative;
    z-index: 50;
    border: 2px solid rgb(0, 108, 169);
    border-radius: 5px;
    background-color: #ffffff;
    padding: 5px;
    font-size: 9pt;
}

http://jsfiddle.net/G4NLn/8/

Answer 2

There's the solution that worked for me, inspired by Sebastian's one :

.highcharts-container,
.highcharts-container svg {
    overflow: visible !important;
}

Only takes care of the overflow though, you still need to clip the content of the tooltip.

Answer 3

Issue has been resolved for me, by changing the svg and highchart-container size dynamically as following

    $('.highcharts-series-group').mouseover(function(){
            setTimeout(function() {
                $('.highcharts-tooltip').css({'height': 'auto !important'});

                var tspans = $('tspan').length;
                var svg_height = 150;
                if( (tspans * 16 ) > 150 ){
                    svg_height = tspans * 16;
                }
                $('.highcharts-container').css({'height': svg_height+'px'});
                $('svg').height(svg_height);
            },100);
    });

fiddle : http://jsfiddle.net/faridu86/syrF6/2/

Answer 4

I used the answer bellow but its not working for me. The problem for me is the tooltip is coming normally but when the mouse is out the tooltip doesn't dissapear. Here is my solution and it works fine for me. Hope that it will help

$('.highcharts-series-group').mouseenter(function(){
            $('.highcharts-tooltip').css({'height': 'auto !important'});
            var tspans = $('tspan').length;
            var svg_height = 150;
            if( (tspans * 16 ) > 150 ){
                svg_height = tspans * 16;
            }
            $('.highcharts-container').css({'height': svg_height+'px'});
            $('svg').height(svg_height);
            defect_chart.redraw()
        });

        $('.highcharts-series-group').mouseleave(function(){
            defect_chart.tooltip.hide()
        });