ハイチャート円グラフと凡例との間のスペースをプロット幅に起因するスペースを減らす方法

Question

凡例がチャートの右側に配置され、レイアウトが設定されている場合、チャートと凡例の間の空白を減らす方法はありますか垂直に？ 問題は、グラフが常に円になるため、円グラフで不必要に大きくなるプロット領域の幅によって発生しているようです。 応答性を考慮してチャートの幅と高さを固定することはできません。

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

グラフのオプションは次のとおりです。

{ 
    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

私は私のコメントで述べたように、あなたは）チャート負荷にあなたの凡例を移動し、（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", 
    } 
}); 

ライブ例：https://jsfiddle.net/gdh86chg/11/