Configuring Pie chart to use minimum space and never hide labels

Question

I'm trying to configure the pie chart to use the minimum space possible.

1. I have set the fixed diameter (to the circle, not to the container) so that i can compare two charts.
2. Did not set the fixed width and height (to the container) as it can hide the labels (Labels are dynamic. Sometimes they can be long. And they are of different length for each chart.)

Here is the jsfiddle. Please note that there are two charts one below the other.

Here is my code:

$(function ()
{
  draw('container1');
  draw('container2');
  function draw(id)
  {
      $('#' + id).highcharts(
      {
          chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
          title:{ text: null },
          legend: { enabled: false },
          credits: { enabled: false },
          tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
          plotOptions: {
                          pie: {
                                  size: 100,
                                  allowPointSelect: true,
                                  cursor: 'pointer',
                                  dataLabels: {
                                      enabled: true,
                                      format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                      style: {
                                          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                      }
                                  }
                              }
                      },
          series: [/* data */]
      });
  }
});

Current issues:

1. There is some unused space around the chart (gray colored).
2. Right hand side some part of the label is hidden even though there is space available on the left side.

Edit 1: From the api docs it seem to use default height 400px and width 600px, if not set on the container element. Is there any way to instruct it to use the minimum required width and height?

Answer 1

Reason for 2: size of the pie chart, you wouldn't see it if you increase the size.

Reason for 3: highcharts does not automatically recenter the chart if you set the size of the chart, and the center of the chart would be center of the div, which leads to cutting off the labels. If you don't set the size, highcharts would recenter the chart to accomodate all the labels in the plot area.

Try using minSize instead of size.