Angular2-Highcharts: tamanho do gráfico de pizza com base na largura do painel
Eu criei um gráfico de pizza e estou colocando esse gráfico dentro de um painel. A largura do meu painel pode ser 600 ou 400, dependendo das configurações do usuário. Quando o tamanho é 600 torta e a legenda é exibida corretamente. Mas quando é 400, a legenda é exibida fora do painel. Existe uma maneira de reduzir o tamanho da torta nesse caso, também a legenda pode ser exibida na parte inferior se o tamanho não for suficiente.
Meu plnkr
https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview
Minhas opções de plotagem
plotOptions: {
pie: {
innerSize: 120,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
states: {
hover: {
halo: {
size: 0
}
}
}
}
},
Código de resposta:
responsivo: {
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
}
}
}]
}