Change height of Highcharts with JavaScript. By default only re-sizes on window re-size

Question

We're using HighCharts in our app, and I've added a function to expand the chart fullsize. I change the styles as well as use Javascript to change the height of the div.

However nothing changes until you actually resize the browser window. Anyone else run into this issue?

<section id="highchart-container" ng-class="{'high-chart-expanded' : highChartMax}">
    <highchart id="chart1" config="chartConfig" style="height:auto"></highchart>
</section>

ChartHeader scope

function expandChartPanel() {
    vm.chartMaxed = !vm.chartMaxed;
    highChart     = ScopeFactory.getScope('highChart');

    if (vm.chartMaxed) {
        highChart.highChartMax = true;
    }
    else {
        highChart.highChartMax = false;
    }

    highChart.toggleChartSize();
}

HighChartDirective scope

function toggleChartSize() {
    var chart1 = document.getElementById("chart1");

    if (vs.highChartMax) {
        chart1.style.height = "100%";
    } else {
        chart1.style.height = "400px";
    }
}

Styles (SASS)

.high-chart-expanded {
    min-height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;

    #highcharts-6,
    #chart1,
    .highcharts-background,
    .highcharts-container {
        min-height: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
    }
}

HighChart chartConfig

ApiFactory.quotes(buildFullUrl(url)).then(function (data) {
    var quote_data = formatQuotes(data, 'quotes');

    // Create the chart
    vs.chartConfig = {
        options: {
            legend: { 
                itemStyle: { 
                    color: "#333333", 
                    cursor: "pointer", 
                    fontSize: "10px", 
                    fontWeight: "normal" 
                },
                enabled: true, 
                floating: true, 
                align: 'left', 
                verticalAlign: 'top', 
                x: 60 
            },
            chart : {
                zoomType: 'x',
                events: {
                    load: function () {
                        // HighChart loaded callback:
                        broadcastChartloaded();
                    }
                }
            },

This is what I see when I console out the chartConfig

console.log('highChart.chartConfig = ', highChart.chartConfig);

Answer 1

Try chart.setSize(width, height) ?

Here's a working example

UPDATE : for angular directive

To Pull out the chart object from directive you can just go the jQuery route:

var chart = $('#theChart').highcharts();
chart.setSize(width, height);

Specifically for ng-highcharts users, here's how its recommended to pull out the high-charts object by the author of the directive. The above method will work just fine too.

var chart = this.chartConfig.getHighcharts();
chart.setSize(width, height);

Although you can do it anywhere in your controller/directive/service, I would recommend you create a new service that returns this object , and then inject it in your controller if you are strict about following Angular design pattern, but if not just those two lines should work fine anywhere that you have access to chartsConfig object.

To reset the chart to being responsive again check this answer.