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);

You could have solved this by triggering "reflow" event, using jquery / plain javascript ( fireEvent on IE, and w3c's dispatchEvent on most other browsers.) — elad.chen, Aug 03 '15 at 13:58
I still haven't been able to get the reflow even to work correctly, the chart does not auto size — Leon Gaban, Aug 03 '15 at 14:10
Check these out: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/chart-reflow/ — elad.chen, Aug 03 '15 at 14:12

score 3 · Accepted Answer · edited May 23 '17 at 12:21

3

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.

edited May 23 '17 at 12:21

Community

1
1

answered Jul 31 '15 at 18:44

Shaunak

17,377
5
53
84

looks like you are using it as a angular directive. Should work just fine, now like in your code example though. you will have to pull out chart object from the directive. Are you using https://github.com/pablojim/highcharts-ng ? – Shaunak Jul 31 '15 at 18:52
Yes that is what we're using, what do you mean by pull out the object? – Leon Gaban Jul 31 '15 at 18:55
Trying to not use jQuery at all, just using `var chart = chart1.highcarts()'` but getting `chart1.highcarts` is not a function :( – Leon Gaban Jul 31 '15 at 19:00
Oh this works when I place it into the config `size: { width: 1000, height: 1000 },` now just need to figure out how to update those values on the fly – Leon Gaban Jul 31 '15 at 19:02
Ok yes it will work! I just need to calculate the div's size before sending in the values :) – Leon Gaban Jul 31 '15 at 19:08
Awesome! Also, you can just replace $('#theChart') with angular.element('#theChart') and it will work just fine. After all angular uses jQuery underneath! – Shaunak Jul 31 '15 at 20:05
I thought it's all written with vanilla javascript and AtScript, anyways... now I'm having a problem with the chart losing the ability to auto-size / reflow, will post a new question soon. – Leon Gaban Jul 31 '15 at 20:07
1

That is what I don't like about highcharts, however that problem has a fix too.. If you go with chart.setSize route. Once you want to get rid of custom size, just call chart.setSize() without params. The chart now disappears, then just change the css height on container back to small once, and the auto-re-sizing kicks in.. It can be made to look seamless.. let me know when you add a new question.. I might be able to modify the last jsfiddle to demo this.. – Shaunak Jul 31 '15 at 20:14
Thanks @shaunak trying stuff out now http://stackoverflow.com/questions/31754511/how-to-allow-highchart-to-auto-size-on-browser-size-after-adding-in-size-variab – Leon Gaban Jul 31 '15 at 20:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/84848/discussion-between-shaunak-and-leon-gaban). – Shaunak Jul 31 '15 at 21:13

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

1 Answers1