[Solved]-How to make a pie chart from highcharts responsive-Highcharts

each time a chart changes size redraw event of a chart is triggered. you can check width of a chart in that event and call additional update for series, because if you change your labels' text to one with <br> tags, then pie seems to be fitting well. in case your issue is more complex solution will still be similar - check size and update chart.

example with changed point names: http://jsfiddle.net/j86jkfvj/114/

example with series update when width is < 900px: http://jsfiddle.net/dhwzw8qg/

here's an example i found of redrawing the pie based on a resize event of the page. i've used it and works well:

jsfiddle.net/4mo2qf79/12

html:

<div class="wrapper">
    <div id="container" style="width:100%;"></div>
</div>

js:

$(function () {
    $('#container').highcharts({
        chart: {
            plotbackgroundcolor: null,
            plotborderwidth: null,
            plotshadow: false
       },
        title: {
            text: 'responsive resize'
        },
        tooltip: {
            pointformat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotoptions: {
            pie: {
                allowpointselect: true,
                cursor: 'pointer',
                datalabels: {
                    enabled: true
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'browser share',
            data: [
                ['firefox', 45.0],
                ['ie',      26.8],
                ['safari',  8.5],
                ['opera',   6.2],
                ['others',  0.7]
            ]
        }]
    });

    function redrawchart(){
        var chart = $('#container').highcharts();

        console.log('redraw');
        var w = $('#container').closest(".wrapper").width()
        // setsize will trigger the graph redraw 
        chart.setsize(       
            w,w * (3/4),false
        );
     }

    $(window).resize(redrawchart);
    redrawchart();

});