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:

example with series update when width is < 900px:


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:


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


$(function () {
        chart: {
            plotbackgroundcolor: null,
            plotborderwidth: null,
            plotshadow: false
        title: {
            text: 'responsive resize'
        tooltip: {
            pointformat: '{}: <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();

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



Related Query

More Query from same tag