Highcharts - Unnecessary space issue in pie chart

Question

I am trying to integrate pie chart in my web page. Its working fine but there is extra space in the top and bottom. I don't what those spaces.

As mentioned in the above image, there is lots of white space in the top and bottom which i don't want. I there any options in the highchart to remove those space? Or can we do using css or anything else?

Below is my sample code which i am working on.

Highcharts.chart('jobs', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie',
            showLegend: false
        },
        title: {
            text: 'Parramatta'
        },
        subtitle: {
            text: 'Total: 12',
        },
        tooltip: {
            pointFormat: '{series.name} ({point.y}): <b>{point.percentage:.1f}%</b>'
        },
        exporting: {
            enabled: false,
        },
        plotOptions: {
            pie: {
                allowPointSelect: false,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    x: 0, y: 0,
                    format: '<b>{point.name} ({point.y}):</b><br />{point.percentage:.1f}%'
                },
                showInLegend: true,
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            
                        }
                    }
                }
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Jobs',
            colorByPoint: true,
            data: [
                {
                name: 'No AFSS',
                y: 4,
                color: '#9933ff',
                },
                {
                name: 'Valid AFSS',
                y: 4,
                color: '#00b04f',
                },
                {
                name: 'Expired AFSS',
                y: 4,
                color: '#ff0000',
                }
            ]
        }]
    });

<link href="http://materialwrap-html.authenticgoods.co/assets/css/theme-a.css" rel="stylesheet"/>
<link href="http://materialwrap-html.authenticgoods.co/assets/css/app.bundle.css" rel="stylesheet"/>
<link href="http://materialwrap-html.authenticgoods.co/assets/css/vendor.bundle.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3 col-sm-4 col-xs-4">
    <div class="panel panel-default">
      <div class="panel-body">
        <div id="jobs"></div>
      </div>
    </div>
  </div>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

Answer 1

You can use the responsive feature to change the chart size for a smaller chart width.

Demo: https://jsfiddle.net/BlackLabel/rhygLqok/

  responsive: {
    rules: [{
      condition: {
        maxWidth: 300
      },
      // Make the labels less space demanding on mobile
      chartOptions: {
        chart: {
          height: 300
        }
      }
    }, {
      condition: {
        minWidth: 300
      },
      chartOptions: {
        chart: {
          height: 400
        }
      }
    }]
  }

Width > 300 -> sets chart height back to 400 (which is set by default)

Width < 300 -> sets chart height to 300 (there is no space)

API: https://api.highcharts.com/highcharts/responsive

Answer 2

The issue here I found was with your col-xs-4 class, removing it brings the chart to full size. Can you check is this class necessary, the updated chart with the class removed is added to the snippet.

Also pie chart has data labels, container will take the space to show data labels also. Removing data labels and adding size 100% will show the chart in full size

function renderChart(id) {
  Highcharts.chart(id, {
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie',
      showLegend: false,
      spacingTop: 0,
    },
    title: {
      text: 'Parramatta'
    },
    subtitle: {
      text: 'Total: 12',
    },
    tooltip: {
      pointFormat: '{series.name} ({point.y}): <b>{point.percentage:.1f}%</b>'
    },
    exporting: {
      enabled: false,
    },
    plotOptions: {
      pie: {
        allowPointSelect: false,
        cursor: 'pointer',
        size: '100%',
        dataLabels: {
          enabled: true,
          inside:true,
          distance:-55,
          format: '<b>{point.name} ({point.y}):</b><br />{point.percentage:.1f}%'
        },
        showInLegend: true,
        cursor: 'pointer',
        point: {
          events: {
            click: function() {

            }
          }
        }
      }
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'Jobs',
      colorByPoint: true,
      data: [{
          name: 'No AFSS',
          y: 4,
          color: '#9933ff',
        },
        {
          name: 'Valid AFSS',
          y: 4,
          color: '#00b04f',
        },
        {
          name: 'Expired AFSS',
          y: 4,
          color: '#ff0000',
        }
      ]
    }]
  });
}

window.addEventListener('DOMContentLoaded', (event) => {
  for (var i = 0; i < 4; i++) {
    renderChart(`jobs${i}`)
  }
});

<link href="http://materialwrap-html.authenticgoods.co/assets/css/theme-a.css" rel="stylesheet" />
<link href="http://materialwrap-html.authenticgoods.co/assets/css/app.bundle.css" rel="stylesheet" />
<link href="http://materialwrap-html.authenticgoods.co/assets/css/vendor.bundle.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3 col-sm-4">
    <div class="panel panel-default">
      <div class="panel-body">
        <div id="jobs0"></div>
      </div>
    </div>
  </div>

  <div class="col-md-3 col-sm-4">
    <div class="panel panel-default">
      <div class="panel-body">
        <div id="jobs1"></div>
      </div>
    </div>
  </div>

  <div class="col-md-3 col-sm-4">
    <div class="panel panel-default">
      <div class="panel-body">
        <div id="jobs2"></div>
      </div>
    </div>
  </div>

  <div class="col-md-3 col-sm-4">
    <div class="panel panel-default">
      <div class="panel-body">
        <div id="jobs3"></div>
      </div>
    </div>
  </div>


</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>