Highcharts饼图如何减少由图宽度引起的图和图例之间的空间

Question

Is there a way to reduce the white space between the chart and the legend, when the legend is positioned to the right of the chart and its layout is set to vertical? It seems like the problem is caused by the width of the plot area, which becomes unnecessarily big in pie charts since the chart is always going to be a circle. The chart's width and height cannot be fixed to allow for responsiveness.

https://jsfiddle.net/rredondo/gdh86chg/

The chart options are:

{
  chart: {
    type: 'pie',
    plotBorderWidth: 1,
    plotBorderColor: '#3F4044',
    borderColor: '#AAAAAA',
    borderWidth: 2
  },
  series: [{
    name: 'Incidents',
    data: [{
      name: "Critical",
      y: 1,
      color: "#FF0000"
    }, {
      name: "Severe",
      y: 8,
      color: "#F57622"
    }, {
      name: "Major",
      y: 13,
      color: "#F0A401"
    }, {
      name: "Minor",
      y: 25,
      color: "#F0C801"
    }, {
      name: "Information",
      y: 30,
      color: "#4AB6FF"
    }],
    size: '80%',
    innerSize: '60%',
    showInLegend: true,
    dataLabels: {
      enabled: false
    }
  }],
  legend: {
    layout: "vertical",
    align: "right",
    verticalAlign: "middle",
  }
}

Answer 1

As I have mentioned in my comment, you should be able to move your legend on chart load and redraw using attr():

http://api.highcharts.com/highcharts/chart.events.load http://api.highcharts.com/highcharts/chart.events.redraw http://api.highcharts.com/highcharts/Element.attr

    // Create the chart
var updateLegend = function(chart) {
  var center = chart.series[0].center;
  console.log(chart.legend)
  chart.legend.group.attr({
    translateX: center[0] + center[2] / 2
  });
}
var chart = Highcharts.chart('container', {
  chart: {
    type: 'pie',
    plotBorderColor: '#3F4044',
    borderColor: '#AAAAAA',
    borderWidth: 2,
    marginRight: 0,
    marginLeft: 0,
    events: {
      load: function() {
        updateLegend(this)
      },
      redraw: function() {
        updateLegend(this);
      }
    }
  },
  series: [{
    name: 'Incidents',
    data: [{
      name: "Critical",
      y: 1,
      color: "#FF0000"
    }, {
      name: "Severe",
      y: 8,
      color: "#F57622"
    }, {
      name: "Major",
      y: 13,
      color: "#F0A401"
    }, {
      name: "Minor",
      y: 25,
      color: "#F0C801"
    }, {
      name: "Information",
      y: 30,
      color: "#4AB6FF"
    }],
    size: '80%',
    innerSize: '60%',
    showInLegend: true,
    dataLabels: {
      enabled: false
    }
  }],
  legend: {
    layout: "vertical",
    align: "right",
    verticalAlign: "middle",
  }
});

Live example: https://jsfiddle.net/gdh86chg/11/