Clever Geek Handbook

Tooltip for Highcharts Pie

I am using Highcharts to create a pie chart. It generates this fine, but the problem is that I have a fixed area to display the chart and the tooltip has a lot of text.

The tooltip is too big 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/

+2


source to share


4 answers


Problem solved for me by resizing svg and highchart-container dynamically as follows

    $('.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);
    });


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

0


source


Please take a look at workaournd with 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/

+3


source


Here is a solution that worked for me, inspired by Sebastian:

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

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

+1


source


I used the answer below, but it didn't work for me. The problem for me is the tooltip goes fine, but when the mouse is missing, the tooltip doesn't go away. Here is my solution and it works great for me. Hope it helps

$('.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()
        });
0


source






More articles:


All Articles