Remove fixed height for full screen highcharts

Question

I have a highchart with two yAxis. One axis is below the other. Both have a fixed height. My Problem is that when I make it full screen the graph still takes only this original height. Normally it will occupy the full height. Is there anyway I can get full height element in full screen?

Highcharts.chart('container', {
chart: {
    type: 'area'
},

yAxis: [{
        height : 200,
},
{
top:300,
height: 200,
}
],

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4],
    yAxis : 0,
},
{
    data: [54.4, 95.6, 194.1, 216.4, 148.5, 126.0, 135.6, 176.0, 144.5, 129.4, 106.1, 71.6, 29.4],
    yAxis : 1,
}]

});

This is my javascript code.

I am attaching the fiddle here

Thanks in advance.

Answer 1

You need to use the responsive parameters in order to get this done the way you wish:

https://jsfiddle.net/gugalondon/n0g9rhzw/1/

This is the updated code that I added:

responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            // Make the labels less space demanding on mobile
            chartOptions: {
                xAxis: {
                    labels: {
                        formatter: function () {
                            return this.value.charAt(0);
                        }
                    }
                },
                yAxis: {
                    labels: {
                        align: 'left',
                        x: 0,
                        y: -2
                    },
                    title: {
                        text: ''
                    }
                }
            }
        }]
    },

and here's the modification of your yAxis:

    yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            height: '50%',
            lineWidth: 2,
            resize: {
                enabled: true
            }
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            top: '50%',
            height: '50%',
            offset: 0,
            lineWidth: 2
        }],

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            // Make the labels less space demanding on mobile
            chartOptions: {
                xAxis: {
                    labels: {
                        formatter: function () {
                            return this.value.charAt(0);
                        }
                    }
                },
                yAxis: {
                    labels: {
                        align: 'left',
                        x: 0,
                        y: -2
                    },
                    title: {
                        text: ''
                    }
                }
            }
        }]
    },
    
    yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            height: '50%',
            lineWidth: 2,
            resize: {
                enabled: true
            }
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            top: '50%',
            height: '50%',
            offset: 0,
            lineWidth: 2
        }],

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4],
        yAxis : 0,
    },
    {
        data: [54.4, 95.6, 194.1, 216.4, 148.5, 126.0, 135.6, 176.0, 144.5, 129.4, 106.1, 71.6, 29.4],
        yAxis : 1,
    }]
});

#container {
  height:600px;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

<div id="container"></div>