问题
I have created a Pie chart and I am placing this Pie chart inside a panel. My panel width can be 600 or 400 depending on the user settings. When the size is 600 Pie and the legend is displayed properly. But when it is 400, the legend is displayed outside of the panel. Is there a way to reduce the size of the pie in that case, also the legend can be displayed at the bottom if the size is not sufficient.
My plnkr
https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview
My plot options
plotOptions: {
pie: {
innerSize: 120,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
states: {
hover: {
halo: {
size: 0
}
}
}
}
},
Response code:
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'top',
layout: 'horizontal',
labelFormatter: function () {
return '<div style="width:180px"><span class="pull-left" style= "font-weight: 500; padding-bottom: 5px; font-family:Helvetica ">' + this.name +
'</span><span class="pull-right" style= "font-weight: 500" >' + this.value +
'</span></div> ';
}
},
pie: {
size: 100,
innerSize: 40
}
}
}]
}
来源：https://stackoverflow.com/questions/43595600/angular2-highcharts-pie-chart-size-based-on-the-width-of-the-panel