Estoy agregando highcharts a mi aplicación Angular-Firebase usando Highcharts-NG y el highchart no está asumiendo el tamaño del div. Sin embargo, cuando pude inspeccionar el elemento para poder personalizar el tamaño del gráfico, mágicamente asume el tamaño div. Hice una búsqueda y probé algunas de las soluciones que encontré, pero ninguna funciona. ¿Es este un problema conocido? ¿Cómo hago para que tenga el tamaño adecuado sin inspeccionar el elemento?

Tengo un video de YouTube del problema aquí: ENLACE

<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,
        };