Highcharts-ng Size preenche div até Inspecionar elemento
Estou adicionando highcharts ao meu aplicativo Angular-Firebase usando Highcharts-NG e o highchart não está assumindo o tamanho da div. No entanto, quando cheguei a inspecionar o elemento para poder dimensionar o gráfico de forma personalizada, ele magicamente assume o tamanho de div. Eu fiz uma pesquisa e tentei algumas das correções que encontrei, mas nenhuma funcionou. Isto é um problema conhecido? Como faço para dimensioná-lo corretamente sem inspecionar o elemento?
Eu tenho um vídeo do youtube do problema aqui: LINK
<div ng-show="overviewOn">
<div class="col-md-12 text-center">
<table class="table table-bordered">
<thead>
<th>Total Score</th>
<th>Strokes Gained Putting</th>
<th>Penalty Strokes</th>
</thead>
<tbody>
<td>{{round.totalScore}}</td>
<td>{{round.sgPutting | number:2 }}</td>
<td>{{round.penalty}}</td>
</tbody>
</table>
</div>
<div class="col-md-12 shotTypeChart">
<div style="width:100%;margin: 0 auto">
<highchart id="sgShotTypeChart" config="sgShotTypeChartConfig"></highchart>
</div>
</div>
<div class="col-md-12 clubChart">
<highchart id="sgClubChart" config="sgClubsChartConfig"></highchart>
</div>
</div>
$scope.sgClubsChartConfig = {
options: {
chart: {
type: 'column'
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
}
}
},
tooltip: {
pointFormat: "Strokes Gained: {point.y:.2f}",
style: {
padding: 10,
fontWeight: 'bold',
}
}
},
series: [{
showInLegend: false,
data: sgByClubData,
, name: 'Strokes Gained'
}],
title: {
text: 'Strokes Gained by Club'
},
loading: false,
yAxis: {
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
},
},
title: {
text: null
}
},
xAxis: {
categories: clubsData,
},
credits: {
enabled: false
},
useHighStocks: false,
};